//公共组件
// UE组件
Vue.component('Ueditor', {

    data() {
        return {
            editor: null
        }
    },
    props: {
        defaultMsg: {
            type: String
        },
        config: {
            type: Object
        }
    },
    mounted() {
        const _this = this;
        require.config({
            baseUrl: '',
            paths: {
                ZeroClipboard: "static/UE/third-party/zeroclipboard/ZeroClipboard"//主要是加这句话
            }
        });
        require(['ZeroClipboard'], function (ZeroClipboard) {
            window['ZeroClipboard'] = ZeroClipboard;
        });
        this.editor = UE.getEditor('editor', this.config); // 初始化UE
        this.editor.addListener("ready", function () {
            _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
        });
    },
    methods: {
        getUEContent() { // 获取内容方法
            return this.editor.getContent()
        },
        setUEContent: function (def) {
            this.editor.setContent(def);
        }

    },
    destroyed() {
        this.editor.destroy();
    },
    template: `<script id="editor" type="text/plain"  style="display:inline-block;width:770px;height:240px;float: left;"></script>`
});

// 分页组件
Vue.component('v-pagination', {
    data: function () {
        return {
            count: 0,
            current: this.currentPage
        }
    },
    mounted() {
        this.current = this.currentPage
        this.$options.methods.pagehide(this)

    },
    props: {
        total: {// 数据总条数
            type: Number,
            default: 0
        },
        display: {
            type: Number,
            default: 10
        },
        currentPage: {// 当前页码
            type: Number,
            default: 1
        },
        pagegroup: {// 分页条数
            type: Number,
            default: 5,
            coerce: function (v) {
                v = v > 0 ? v : 5;
                return v % 2 === 1 ? v : v + 1;
            }
        }
    },
    watch: {
        currentPage: function () {
            this.current = this.currentPage
        }
    },
    computed: {
        page: function () { // 总页数
            return Math.ceil(this.total / this.display);
        },
        grouplist: function () { // 获取分页页码
            var len = this.page, temp = [], list = [], count = Math.floor(this.pagegroup / 2), center = this.current;
            if (len <= this.pagegroup) {
                while (len--) {
                    temp.push({text: this.page - len, val: this.page - len});
                }
                ;
                return temp;
            }
            while (len--) {
                temp.push(this.page - len);
            }
            ;
            var idx = temp.indexOf(center);
            (idx < count) && (center = center + count - idx);
            (this.current > this.page - count) && (center = this.page - count);
            temp = temp.splice(center - count - 1, this.pagegroup);
            do {
                var t = temp.shift();
                list.push({
                    text: t,
                    val: t
                });
            } while (temp.length);
            if (this.page > this.pagegroup) {
                (this.current > count + 1) && list.unshift({text: '...', val: list[0].val - 1});
                (this.current < this.page - count) && list.push({text: '...', val: list[list.length - 1].val + 1});
            }
            return list;
        }
    },
    methods: {
        setCurrent: function (idx) {
            if (this.current != idx && idx > 0 && idx < this.page + 1) {
                this.current = idx;
                this.$emit('pagechange', this.current);
            }
        },
        pagehide: function (ta) {
            if (ta.total === 0) {
                $(".pagination").hide();
            } else {
                $(".pagination").show();
            }

        }
    },
    template: ` <nav>
    <ul class="pagination">
      <li :class="{'disabled': current == 1}"><a href="javascript:;" @click="setCurrent(current - 1)"> « </a></li>
      <li :class="{'disabled': current == 1}"><a href="javascript:;" @click="setCurrent(1)"> 首页 </a></li>
      <li v-for="p in grouplist" :class="{'active': current == p.val}"><a href="javascript:;"
                                                                          @click="setCurrent(p.val)"> {{ p.text }} </a>
      </li>
      <li :class="{'disabled': current == page}"><a href="javascript:;" @click="setCurrent(page)"> 尾页 </a></li>
      <li :class="{'disabled': current == page}"><a href="javascript:;" @click="setCurrent(current + 1)"> »</a></li>
    </ul>
  </nav>`
});
//模态框
Vue.component('modal-component', {
    data: function () {
        return {
            count: 0,
            root: tmpsUrls + "www/static/icons/关闭.png"
        }
    },
    mounted() {
    },
    methods: {},
    template: `<div class="modal fade" id="myModal2" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="station-title">
                    四川省——成都市
                </div>
                <div class="station-name-box">
                    <span class="station-name">锦江区</span>
                    <span class="station-name">锦江区</span>
                    <span class="station-name">锦江区</span>
                    <span class="station-name">锦江区</span>
                    <span class="station-name">锦江区</span>
                    <span class="station-name">锦江区</span>
                    <span class="station-name">锦江区</span>
                    <span class="station-name">锦江区</span>
                    <span class="station-name">锦江区</span>
                    <span class="station-name">锦江区</span>
                </div>
                <div class="station-btn" data-dismiss="modal">选择当前行政区域</div>
                <div class="close-static-modal"><img data-dismiss="modal" :src="root" alt=""></div>
            </div>

        </div>
    </div>
</div>`
});


//play-footer
Vue.component('play_footer-component', {
    data: function () {
        return {
            count:0,
            info: [],
            music: [],
            play: '',
            is_play: true,
            all_time: '',
            s_time: '0',
            left: '2.1%',
            left_red: '0',
            duration: '0',
            date: new Date(),
            s_type: 1,
            play_start: true,
            recentlylist:[],
            curent:1,
            muId: 0,
            scm: false,
            scma: false,
            zjId: 0,
            fk:'',
            pp:false,
            users:[],
            share:false,
            ctx:{},
            flag:1,
            timerc:null,
            type:false,
            content:'',
            date:''

        }
    },
    filters: {
        initDtae:function(value){
            let secondTime = parseInt(value);// 秒
            let minuteTime = 0;// 分
            let hourTime = 0;// 小时
            if(secondTime > 59) {// 如果秒数大于59，将秒数转换成整数
                // 获取分钟，除以59取整数，得到整数分钟
                minuteTime = parseInt(secondTime / 60);
                // 获取秒数，秒数取佘，得到整数秒数
                secondTime = parseInt(secondTime % 60);
                // 如果分钟大于60，将分钟转换成小时
                if(minuteTime > 59) {
                    // 获取小时，获取分钟除以60，得到整数小时
                    hourTime = parseInt(minuteTime / 60);
                    // 获取小时后取佘的分，获取分钟除以60取佘的分
                    minuteTime = parseInt(minuteTime % 60);
                }
            }

            if(hourTime<10){
                hourTime = "0"+hourTime
            }
            if(minuteTime<10){
                minuteTime = "0"+minuteTime
            }
            if(secondTime<10){
                secondTime = "0"+secondTime
            }
            return hourTime + ':'+ minuteTime + ':' + secondTime;
            }
        }
       ,
    props: ["musicid", 'playmc', 'obj',"playthismusic"],
    watch: {
        's_time': function () {
            this.play_start = !$("#Music")[0].paused
            if (this.play_start) {
                // $(".play-img").addClass("active")
            }else{
                // $(".play-footer").fadeOut(100)

            }
            if (this.s_time == this.all_time) {
                this.$emit("changeplay", false)

                this.is_play = this.playmc
            } else {
                this.$emit("changeplay", true)

                this.is_play = this.playmc
            }
            this.s_time = $("#Music")[0].currentTime
            this.duration = $("#Music")[0].duration
        },

        'obj': function () {
            // this.is_play = false
            var _this = this
            _this.flag = 1

            axios.post(sysurl + 'getPlayUrl?musicId=' + this.musicid + '&uid=' + getCookie('uid') + '&tryType=1')
                .then(res => {
                    if (res.data.code === 0) {
                        _this.play = res.data.data.playUrl
                        // setTimeout(function () {
                        //
                        // },1000)
                        var audio = $("#Music")[0]

                        audio.addEventListener("canplay", function(){//监听audio是否加载完毕，如果加载完毕，则读取audio播放时间
                            if(_this.flag == 1){
                                _this.s_time = $("#Music")[0].currentTime
                                _this.duration = $("#Music")[0].duration
                                _this.drowimg()
                            }
                            _this.flag++

                        });

                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })



            // this.play = 'http://192.168.0.51:8091/api/play?musicId=' + this.musicid + '&uid=' + getCookie('uid')+'&tryType=1'

            axios.post(sysurl + 'findMusicId?id=' + this.musicid)
                .then(res => {
                    if (res.data.code === 0) {
                        this.info = res.data.data;
                        this.all_time = res.data.data.times


                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })

            var timers = setInterval(function () {

                        _this.s_time = $("#Music")[0].currentTime
                        _this.duration = $("#Music")[0].duration


                _this.all_time = _this.duration
                if (_this.s_time * 1 > 0) {
                    // $(".stare")[0].style.left = (_this.s_time/_this.duration*1)*100+'%'
                    $(".music-info-index")[0].style.left = (_this.s_time / _this.duration * 1) * 100 + '%'
                    $(".music-info-wave-cover")[0].style.width = (_this.s_time / _this.duration * 1) * 100 + '%'
                }
                if (Math.floor(_this.s_time) / Math.floor(_this.duration) === 1) {
                    _this.$emit("changeplay", false)
                    _this.is_play = false

                    imagePause()
                    _this.$emit("changestatus", false)
                    clearInterval(timers);
                    _this.$emit("nextsong")

                }

            }, 1000);
        },
        'is_play': function () {
            this.is_play = this.is_play
        },
        'playthismusic':function () {
            this.$options.methods.playMusic.bind(this)()
        }

    },

    mounted() {
        var that = this
        $("img").mousedown(function () {
            return false;
        });
        axios.post(sysurl2 + 'user/info')
            .then(res => {
                if (res.data.code === 0) {
                    this.users = res.data.USER;
                } else {

                }
            }, err => {

            })
            .catch((error) => {

            })






//canvas


    },
    methods: {
        // changetab:function (type) {
        //     this.$emit("changetab",type);
        // }


        drowimg(){

            var that = this
            //canvas进度条
            var bg = document.getElementById('bg');

            var ctx = bg.getContext('2d');
            ctx.clearRect(0, 0, bg.width, bg.height);
            var circ = Math.PI * 2;
            var quart = Math.PI / 2;
            var imd = null;
            var circ = Math.PI * 2;
            var quart = Math.PI / 2;

            ctx.beginPath();
            ctx.strokeStyle = '#f00';
            ctx.lineCap = 'square';
            ctx.closePath();
            ctx.fill();
            ctx.lineWidth = 5.0;

            imd = ctx.getImageData(0, 0, 140, 140);

            function draw(current){
                ctx.putImageData(imd, 0, 0);
                ctx.beginPath();
                ctx.arc(70, 70, 65, -(quart), ((circ) * current) - quart, false);
                ctx.stroke();
            }
//draw(0.6);
//             that.timerc = null
            if(that.timerc!=null){
                clearInterval(that.timerc);
                that.timerc = null

            }
            var t = that.s_time/that.duration;
            console.log(t);

            function loadCanvas(now){

                that.timerc = setInterval(function(){
                    if(parseInt(that.s_time+1)/parseInt(that.duration) >= now){
                        draw(0);//最后一次绘制
                        clearInterval(that.timerc);
                    }else{
                        draw(that.s_time/that.duration);
                        t+=1/that.duration;
                    }
                },1000);
            }
            loadCanvas(1);
            // clearInterval(timerc);


        },

        playMusic: function () {
            var _this = this
            if (this.is_play) {
                _this.$emit("changeplay", false)
                _this.is_play = false

                $("#Music")[0].pause()
                // $(".play-footer").fadeOut(200)
                imagePause()
                this.$emit("changestatus", false)
            } else {
                this.$emit("changeplay", true)
                $("#Music")[0].play()
                imagerotate()
                this.$emit("changestatus", true)

                if (this.s_time / this.duration * 1 === 1) {
                    $(".music-info-index")[0].style.left = 0
                    $(".music-info-wave-cover")[0].style.width = 0
                    $("#Music")[0].currentTime = 0
                    _this.s_time = 0
                    _this.duration = 0

                    var timers = setInterval(function () {
                        var flag = 1;
                        _this.s_time = $("#Music")[0].currentTime
                        if(flag == 1){
                            _this.duration = $("#Music")[0].duration
                            flag ++
                        }
                        if (_this.duration * 1 > 0) {
                            // $(".stare")[0].style.left = (_this.s_time/_this.duration*1)*100+'%'
                            $(".music-info-index")[0].style.left = (_this.s_time / _this.duration * 1) * 100 + '%'
                            $(".music-info-wave-cover")[0].style.width = (_this.s_time / _this.duration * 1) * 100 + '%'
                        }
                        if (Math.floor(_this.s_time) / Math.floor(_this.duration) === 1) {
                            _this.$emit("changeplay", false)
                            _this.is_play = false

                            imagePause()
                            _this.$emit("changestatus", false)
                            clearInterval(timers);
                            _this.$emit("nextsong")

                        }


                    }, 1000);
                }

            }


        },
        getcurrentTime: function () {

        },
        progress() {

            event.preventDefault()
            $(".music-info-index")[0].style.left = event.offsetX
            $(".music-info-wave-cover")[0].style.width = event.offsetX
            $("#Music")[0].currentTime = $("#Music")[0].duration * event.offsetX / $(".music-info-wave").width()
            this.s_time = $("#Music")[0].currentTime


        },
        changetype: function (type) {
            let _this = this

            axios.post(sysurl2 + 'user/info')
                .then(res => {
                    if (res.data.code === 0) {

                        if (type === this.s_type) {
                            axios.post(sysurl + 'getPlayUrl?musicId=' + this.musicid + '&uid=' + getCookie('uid') + '&tryType=1')
                                .then(resq => {
                                    if (resq.data.code === 0) {
                                        this.play = resq.data.data.playUrl


                                    } else {


                                        $(".yz-text").html("普通音质")
                                        return false
                                    }
                                }, err => {

                                })
                                .catch((error) => {

                                })

                            // this.play = 'http://192.168.0.51:8091/api/play?musicId=' + this.musicid + '&uid=' + getCookie('uid')+'&tryType=1'

                        } else {
                            // this.play = 'http://192.168.0.51:8091/api/play?musicId=' + this.musicid + '&uid=' + getCookie('uid')
                            axios.post(sysurl + 'getPlayUrl?musicId=' + this.musicid + '&uid=' + getCookie('uid'))
                                .then(res => {
                                    if (res.data.code === 0) {
                                        this.play = res.data.data.playUrl
                                        // this.s_type = type
                                    } else {
                                        if(res.data.code == 403){
                                            // layer.msg(res.data.message,function () {
                                            _this.pp = true
                                            // })
                                        }else{
                                            layer.msg(res.data.message)
                                        }
                                        $(".yz-text").html("普通音质")
                                        return false
                                    }
                                }, err => {

                                })
                                .catch((error) => {

                                })
                        }

                        if (this.s_time / this.duration * 1 === 1) {
                            $(".music-info-index")[0].style.left = 1.11
                            $(".music-info-wave-cover")[0].style.width = 0
                            $("#Music")[0].currentTime = 0
                            this.s_time = 0
                            var timers = setInterval(function () {
                                _this.s_time = $("#Music")[0].currentTime
                                _this.duration = $("#Music")[0].duration
                                if (_this.duration * 1 > 0) {
                                    // $(".stare")[0].style.left = (_this.s_time/_this.duration*1)*100+'%'
                                    $(".music-info-index")[0].style.left = (_this.s_time / _this.duration * 1) * 100 + '%'
                                    $(".music-info-wave-cover")[0].style.width = (_this.s_time / _this.duration * 1) * 100 + '%'
                                }
                                if (Math.floor(_this.s_time) / Math.floor(_this.duration) === 1) {
                                    _this.$emit("changeplay", false)
                                    _this.is_play = false

                                    imagePause()
                                    _this.$emit("changestatus", false)
                                    clearInterval(timers);
                                    _this.$emit("nextsong")

                                }


                            }, 1000);
                        }
                    } else {
                        $(".yz-text").html("普通音质")

                        layer.msg(res.data.message)
                        return false
                    }
                }, err => {

                })
                .catch((error) => {

                })



        },

        handelckick: function (e) {

            $(e.target).children('.select-list').fadeIn(100);
            $(e.target).parents(".newuqu-list").siblings().find('.select-list').hide()
            $(e.target).parents("li").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
            $(e.target).parents(".new-list").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix ").siblings().find('.select-list ').hide()
        },
        handelleave: function (e) {
            $(e.target).fadeOut(200)
        },
        zan: function (id) {
            var uid = getCookie('uid');
            if(uid){
                axios.post(sysurl + 'isZan?musicId=' + id + '&uid=' + uid)
                    .then(res => {
                        if (res.data.code === 0) {
                            if (res.data.data.isZan === 0) {
                                axios.post(sysurl + 'giveZan?musicId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            } else {
                                axios.post(sysurl + 'cancelZan?musicId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            }
                            // layer.msg(res.data.message)


                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }else {
                overy_show()
                $(".login-mask").fadeIn()
            }

        },
        sc(id) {
            this.scm = true
            this.muId = id;

        },
        out() {
            this.scm = false
            this.scma = false
            this.pp = false
            $('.login-mask').fadeOut();
        },

        showMessageFromChild(data) {
            this.scm = data
            this.scma = data
        },
        pla(id,t) {
            this.fk = t
            this.scma = true;
            this.zjId = id;

        },
        download: function (id, type) {
            overy_show()
            $(".down-mask").fadeIn()
            this.$emit("showdownload", id, type)
        },





        nextsong:function () {
            var that = this
            this.s_time = 0
            this.$emit("nextsong")


        },
        prevsong:function () {
            // clearInterval(timerc);
            this.s_time = 0
            this.$emit("prevsong")
        },
        playhide:function () {
            $(".play-footer")[0].style.visibility = "hidden"
            $(".music-cover-box").addClass("fixedri")


        },
        playshow:function () {
            $(".play-footer")[0].style.visibility = "visible"
            $(".music-cover-box").removeClass("fixedri")


        },
        showshare(){
            this.share = !this.share
        },
        getData(content,date,type){
            this.content = content
            this.date = date
            this.type = type
        }


    },

    template: ` 
        <div class="play-footer" >
        
         <vippay v-if="pp==true" :info="users"></vippay>
            <div class="overlay" style="display: block"  v-if="pp==true" @click="out"></div>

          <musicsc :muid="muId" :video="0"  v-on:muscm="showMessageFromChild" v-if="scm == true"></musicsc>
            <musicpl :zjid="zjId" :type="2" :fk="fk" v-on:muscm="showMessageFromChild" v-if="scma == true"></musicpl>

         <div class="overlay" v-if="scm == true || scma" @click="out" style="display: block"></div>
            <div class="music-player">

                <div class="music-cover-box" @click="playshow">

                        <img class="cover-in" :src="info.cover" id="imageel" alt="">

                   <canvas id="bg" width="140" height="140"></canvas>
                </div>

                <div class="music-info">
                    <div class="music-info-row">
                        <div class="relative select-box  text-center padding_5 mui-h6 left vodeo-yz"style="margin: 0 10px 0 0!important;padding: 6px;">
			    				<i class="color_ff yz-text">普通音质</i>
			    				<p class="absolute select-list">
			    					<a @click="changetype(1)" >普通音质</a>
                                    <a @click="changetype(2)">VIP音质</a>
			    				</p>
			    			</div>
			    			<div class="music-info-name">{{info.musicName}}</div>
			    			<span class="narrow" @click="playhide"><img src="img/narrow.png" alt=""></span>
                    </div>

                    <div class="music-info-row">
                        <span class="music-info-prop">{{info.className}} | {{info.speed}} | {{info.tone}} | 金币{{info.gold}}个 | 播放时长 {{s_time|initDtae}}/{{info.times}}</span>
                        <div class="bshare-custom" style="float: right" v-show="share"><a title="分享到QQ空间" class="bshare-qzone"></a><a title="分享到新浪微博" class="bshare-sinaminiblog"></a><a title="分享到人人网" class="bshare-renren"></a><a title="分享到腾讯微博" class="bshare-qqmb"></a><a title="分享到网易微博" class="bshare-neteasemb"></a><a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a><span class="BSHARE_COUNT bshare-share-count">0</span></div>

                    </div>
                    <div class="music-info-row">
                           <div class="music-info-wave" @click="progress">
                                <img :src="info.wave" alt="" >
                                <div class="music-info-index"></div>
                                <div class="music-info-wave-cover"></div>
                            </div>
                    </div>
                    <div class="music-info-row">
                        <div class="player-btn">
                            <img src="img/prev_song.png" alt="" @click="prevsong">
                            <img src="img/play.png" alt="" @click="playMusic" id="thismusic" v-if="!is_play">
                            <img src="img/pause.png" alt="" @click="playMusic" id="thismusic" v-if="is_play">
                            <img src="img/next_song.png" alt="" @click="nextsong">
                            
                           <audio id="Music" :src="play"  autoplay="autoplay"></audio>
                        </div>
                        <div class="user-btn">
                            <span @click="download(info.id,1)"><img src="img/download.png" alt="">下载</span>
                            <span @click="showshare"><img src="img/share.png" alt="">分享</span>
                            <span @click="pla(info.id,1)"><img src="img/feedback.png" alt="">反馈</span>
                            <span><img src="img/no_support.png" alt="">点赞</span>
                            <span @click="sc(info.id)"><img src="img/no_collection.png" alt="">收藏</span>
                            <span @click="pla(info.id)"><img src="img/commemt.png" alt="">评论</span>
                        </div>
                        <comscroll-component :musicid="info.id" :update="scma" @sendData="getData"></comscroll-component>
                                <div class="moreComment" v-if="type">
                                    <img src="img/down.png" alt="">
                                    <p>{{content}}<br>
                                    {{date}}
                                    </p>
                                </div>
                    </div>
                </div>
            </div>

    </div>
    `
});


Vue.component('comscroll-component', {
    data: function () {
        return {
            type:2,
            list:[],
            content:'',
            created:''

        }
    },
    filters: {
        formdata: function (val) {
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d;
        }
    },
    mounted() {
        var sw = $("#commentlist")



    },
    props: ['musicid','update'],
    watch: {
        'musicid':function () {
            this.list = []
            this.getdetail()
        },
        "update":function () {
            this.list = []
            this.getdetail()
        }
    },

    methods: {
        getdetail(){
            var that = this
            axios.post(sysurl2 + 'comment/list?tid=' + this.musicid + '&type=' + this.type)
                .then(res => {
                    //获取列表 初始化
                    if (res.data.code === 0) {
                        this.list = res.data.data.list

                        this.$nextTick(() => {  // 下一个UI帧再初始化swiper
                            var swiper = new Swiper('#commentlist', {
                                initialSlide :0,
                                loop: true,
                                direction : 'vertical',
                                grabCursor : true,
                                speed: 900,
                                autoplay: true,
                                on:{
                                    autoplayStart:function(){

                                    },
                                    autoplayStop:function(){

                                    }
                                },
                                observer:true,
                                observeParents: true,




                            })

                            $("#commentlist").mouseenter(function () {//滑过悬停
                                swiper.autoplay.stop();//mySwiper 为上面你swiper实例化的名称
                                var content = $('.swiper-slide-active .user-info-headpic').attr("data-content")
                                var date = $('.swiper-slide-active .user-info-headpic').attr("data-date")
                                if(content!=undefined){
                                    that.$emit('sendData',content,date,true)
                                }

                            }).mouseleave(function(){//离开开启
                                swiper.autoplay.start();
                                var content = $('.swiper-slide-active .user-info-headpic').attr("data-content")
                                var date = $('.swiper-slide-active .user-info-headpic').attr("data-date")
                                that.$emit('sendData',content,date,false)
                            });



                        });

                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })

        }

    },
    template: `
     <div class="out-box swiper-container" id="commentlist">
     
     

                        <div class="comment-roll-box swiper-wrapper" >

                            <div class="comment-roll swiper-slide" v-for="(b,item) in list" :key="item">
                                <div class="user-info-headpic" :data-content="b.content" :data-date="b.created">
                                    <img :src="b.HEADURL" alt="">
                                </div>
                                <div class="music-content">{{b.NICKNAME}}：{{b.content}}</div>
                                
                            </div>
                            
                    
                            
                        </div>
                        
<!--                        <div class="swiper-pagination"></div>-->
                        </div>
    `
});





//最近播放

Vue.component('recently-component', {
    data: function () {
        return {
            count: 0,
            list: [],
            detail: [],
            checksta: false,
            muId: 0,
            scm: false,
            scma: false,
            zjId: 0,
            total: 1,     // 记录总条数
            display: 15,   // 每页显示条数
            current: 1,   // 当前的页数
            downloadtype: 1,
            recentlylist:[],
            curent:1
        }
    },
    filters: {
        formdata: function (val) {
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d;
        }
    },

    mounted() {

        this.$options.methods.recently.bind(this)(1)

    },
    methods: {

        recently:function(){

            var _this = this
            axios.post(sysurl + 'myPlaysList?type=music&showCount=10&currentPage='+this.curent+'&uid='+getCookie("uid"))
                .then(res => {
                    if (res.data.code === 0) {
                        this.recentlylist = res.data.data.list
                        $("#recently").createPage({
                            pageCount: res.data.data.totalPage*1,
                            current: res.data.data.currentPage*1,
                            backFn: function(p) {
                                _this.curent = p
                                _this.$options.methods.getDetails.bind(_this)()
                            }
                        })
                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })

        },
        getDetails:function(){

            var _this = this
            axios.post(sysurl + 'myPlaysList?type=music&showCount=10&currentPage='+this.curent+'&uid='+getCookie("uid"))
                .then(res => {
                    if (res.data.code === 0) {
                        this.recentlylist = res.data.data.list

                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })

        },


        handelckick: function (e) {

            $(e.target).children('.select-list').fadeIn(100);
            $(e.target).parents(".newuqu-list").siblings().find('.select-list').hide()
            $(e.target).parents("li").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
            $(e.target).parents(".new-list").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix ").siblings().find('.select-list ').hide()
        },
        handelleave: function (e) {
            $(e.target).fadeOut(200)
        },
        zan: function (id) {
            var uid = getCookie('uid');
            if(uid){
                axios.post(sysurl + 'isZan?musicId=' + id + '&uid=' + uid)
                    .then(res => {
                        if (res.data.code === 0) {
                            if (res.data.data.isZan === 0) {
                                axios.post(sysurl + 'giveZan?musicId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            } else {
                                axios.post(sysurl + 'cancelZan?musicId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            }
                            // layer.msg(res.data.message)


                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }else {
                overy_show()
                $(".login-mask").fadeIn()
            }

        },
        sc(id) {
            $(".mask-video").fadeOut(200)
            this.scm = true
            this.muId = id;

        },
        out() {
            this.scm = false
            this.scma = false
            $('.login-mask').fadeOut();
        },
        showMessageFromChild(data) {
            this.scm = data
        },
        pla(id) {
            $(".mask-video").fadeOut(200)
            this.scma = true;
            this.zjId = id;

        },
        download: function (id, type){
            $(".mask-video").fadeOut(200)
            overy_show()
            $(".down-mask").fadeIn()
            this.$emit("showdownload", id, type)
        },

        playMusic: function (id) {
            this.$emit("music", id, event.target)
        },
        todetail: function (id) {
            // this.$router.push({path: '/musicList', query: {id: id}})
        },



    },
    template: `
      <div>
        <musicsc :muid="muId" :video="0"  v-on:muscm="showMessageFromChild" v-if="scm == true"></musicsc>
     <musicpl :zjid="zjId" :type="2" v-on:muscm="showMessageFromChild" v-if="scma == true"></musicpl>
    
         <div class="overlay" v-if="scm == true || scma" @click="out" style="display: block"></div>
        <div class="mask-video">
    \t\t<div class="music-box ">
    \t\t\t<h4 class="padding_10 font_16"><strong>最近试听</strong></h4>
\t\t    \t<div class="clearfix bg_b">
\t    \t\t\t<p class="left">
\t\t    \t\t\t<span style="margin-left: 105px;">歌名</span>
\t    \t\t    </p>
\t    \t\t    <p class="right">
\t\t    \t\t\t<span>音调 </span>
\t\t    \t\t\t<span>更新日期</span>
\t\t    \t\t\t<span style="margin-right: 114px;">BPM</span>
\t    \t\t    </p>
\t    \t\t</div>
 \t<div class="clearfix" v-for="(r,index) in recentlylist" :key="index">
\t    \t\t\t<p class="left">
\t\t    \t\t\t<span><img width="30" height="30" class="bor_r5 vertical-align_m" :src="r.cover"></span>
\t\t    \t\t\t<span class="icon-videobtn">
<img :id="'re-'+r.musicId" class="vertical-align_m" src="img/icon-zt.png" @click="playMusic(r.musicId)"/>
</span>
\t\t    \t\t\t<span class="song-name text" @click="todetail(r.id)">{{r.musicName}}</span>
\t\t    \t\t</p>
\t\t    \t\t<div class="right">
\t\t    \t\t\t<span>{{r.speed}}</span>
\t\t    \t\t\t<span>{{r.tone}}</span>
\t\t    \t\t\t<span>{{r.updateTime|formdata}}</span>
\t\t    \t\t\t<span class="relative select-box  text-center padding_5" @click.stop="handelckick">
\t\t    \t\t\t\t<i class="color_55">￥{{r.gold}}</i>
\t\t    \t\t\t\t<i class="absolute select-list" @mouseleave.prevent="handelleave">
\t\t    \t\t\t\t\t<a @click="zan(r.musicId)" class="icon-zan"><img src="img/icon-zan.png">点赞</a>
\t\t    \t\t\t\t\t<a @click="download(r.musicId,1)" class="icon-download"><img src="img/icon-xz.png">下载</a>
\t\t    \t\t\t\t\t<a @click="sc(r.musicId)" class="icon-sc"><img src="img/icon-start.png">收藏</a>
\t\t    \t\t\t\t\t<a @click="pla(r.musicId)" class="icon-pl"><img src="img/icon-pl.png">评论</a>
\t\t    \t\t\t\t\t<a href="javascript:;" class="icon-feek"><img src="img/icon-fk.png">反馈</a>
\t\t    \t\t\t\t</i>
\t\t    \t\t\t</span>
\t\t    \t\t</div>
\t    \t\t</div>
    \t\t</div>
\t\t    <div class="padding_b50">
 <div class="tcdPageCode mg_top20" id="recently"></div>
\t\t    </div>
    \t</div>
</div>
    `
});



//下载
Vue.component('down-component', {
    data: function () {
        return {
            detail: [],
            info: [],
            MaskCode: '',
            MaskCodeName: '',
            url: '',
            text: '',
            typeName: ''

        }
    },
    filters: {
        formdata: function (val) {
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d;
        }
    },
    mounted() {


    },
    props: ["downloadid", "downloadtype"],
    watch: {

        'downloadid': function (val, oldval) {
            if (this.downloadtype == 1) {
                this.MaskCodeName = "musicMaskCode"
                this.url = "findMusicId"
                this.text = '音质'
                this.typeName = "音乐"
                this.quality = "比特率"
            } else {
                this.MaskCodeName = "videoMaskCode"
                this.url = "findVideoId"
                this.text = '画质'
                this.typeName = "视频"
                this.quality = "分辨率"
            }


            this.$options.methods.getdetail(this)
        }
    },

    methods: {

        getdetail: function (obj) {
            axios.post(sysurl + obj.url + "?id=" + obj.downloadid)
                .then(res => {
                    if (res.data.code === 0) {
                        obj.info = res.data.data;
                        obj.MaskCode = res.data.data.maskCode

                    } else {
                        // layer.msg(res.data.message)

                    }
                }, err => {

                })
                .catch((error) => {

                })

        },

        getpath: function (obj) {
            var url = ''
            if (obj.downloadtype == 1) {
                url = sysurl + 'getDownloadPower?musicId=' + obj.downloadid + '&' + obj.MaskCodeName + '=' + obj.MaskCode
            } else {
                url = sysurl + 'getDownloadPower?videoId=' + obj.downloadid + '&' + obj.MaskCodeName + '=' + obj.MaskCode
            }
            axios.post(url)
                .then(res => {
                    if (res.data.code === 0) {
                        window.open(res.data.message)

                    } else if (res.data.code === -2) {

                        layer.confirm(res.data.data.msg, {btn: ["继续", "取消"]}, function (index) {
                            if (obj.downloadtype == 1) {
                                url = sysurl + 'getDownloadPower?musicId=' + obj.downloadid + '&' + obj.MaskCodeName + '=' + obj.MaskCode + '&' + res.data.data.parameter + '=1'
                            } else {
                                url = sysurl + 'getDownloadPower?videoId=' + obj.downloadid + '&' + obj.MaskCodeName + '=' + obj.MaskCode + '&' + res.data.data.parameter + '=1'
                            }
                            axios.post(url)
                                .then(res => {
                                    layer.close(index)
                                    if (res.data.code === 0) {
                                        window.open(res.data.message)


                                    } else {
                                        // layer.msg(res.data.message)


                                    }
                                }, err => {

                                })
                                .catch((error) => {

                                })


                        }, function (index) {
                            layer.close(index)
                        })

                    } else {
                        layer.msg(res.data.message)
                    }
                }, err => {

                })
                .catch((error) => {

                })

        },
        downloadthis: function (e) {
            this.$options.methods.getpath(this)
            cancel(e.target)
        }

    },
    template: `
  <div class="mask down-mask">
\t    \t<h4 class="padding_10 text-center mask-tittle color_ff">下载提示</h4>
\t    \t<div class="mask-main  ">
\t    \t\t<div class="relative clearfix mg_tb20 sex-box">
\t\t    \t\t<div class="left mask-rido radio-list">
\t    \t\t\t\t<p class="radio-sex">
\t\t    \t\t\t\t<label for="pt">
\t\t\t    \t\t\t\t<img class="radio-list vertical-align_m" src="img/nodownload.png">
\t\t\t    \t\t\t\t普通{{text}}
\t\t\t    \t\t\t</label>
\t\t\t    \t\t\t<input type="radio" name="sex" id="pt" checked="checked" hidden="hidden" value="">
\t\t    \t\t\t</p>
\t\t    \t\t\t<p class="color_5 mg_top10">格式 {{info.transFormats}}</p>
\t\t    \t\t\t<p class="color_5 mg_top10">大小 {{info.transSizeDes}}</p>
\t\t    \t\t\t<p class="color_5 mg_top10" v-if="downloadtype == 1">比特率 {{info.transBitrate}}</p>
\t\t    \t\t\t<p class="color_5 mg_top10" v-if="downloadtype != 1">分辨率 {{info.transQuality}}</p>
\t\t    \t\t\t<p class="color_5 mg_top10">时长 {{info.transTimes}}</p>
\t\t    \t\t</div>
\t\t    \t\t<div class="left mask-rido radio-list">
\t    \t\t\t\t<p class="radio-sex">
\t\t    \t\t\t\t<label for="height">
\t\t\t    \t\t\t\t<img class="radio-list vertical-align_m" src="img/rideo-select.png">
\t\t\t    \t\t\t\t高{{text}}
\t\t\t    \t\t\t</label>
\t\t\t    \t\t\t<input type="radio" name="sex" id="height" checked="checked" hidden="hidden" value="">
\t\t    \t\t\t</p>
\t\t    \t\t\t<p class="color_5 mg_top10">格式 {{info.formats}}</p>
\t\t    \t\t\t<p class="color_5 mg_top10">大小 {{info.sizeDes}}</p>
\t\t    \t\t\t<p class="color_5 mg_top10" v-if="downloadtype == 1">比特率 {{info.bitrate}}</p>
\t\t    \t\t\t<p class="color_5 mg_top10" v-if="downloadtype != 1">分辨率 {{info.quality}}</p>
\t\t    \t\t\t<p class="color_5 mg_top10">时长 {{info.times}}</p>
\t\t    \t\t</div>
\t    \t\t</div>
\t    \t</div>

\t    \t<p class="text-center mask-font"><a href="javascript:;" class="basic_a">下载{{typeName}}需支付{{info.gold}}金币</a></p>
\t    \t<p class="mask-abox text-center">
\t    \t\t<a @click="downloadthis">确认下载</a>
\t    \t\t<a href="javascript:;" onclick="cancel(this)">取消</a>
\t    \t</p>
\t    </div>
    `
});


// header组件
Vue.component('header-component', {
    data: function () {
        return {
            info: [],
            loginshow: true,
            list: [],
            users: null,
            sho: 0,
            navList: "",
            pp: false,
            txs: false
        }
    },
    props: ['homelist'],
    watch: {
        "homelist": function () {
            this.navList = this.homelist;
        }
    }
    ,
    mounted() {
        var _this = this
        var uid = getCookie('token');
        if (uid == null) {
            this.loginshow = true
        } else {
            this.loginshow = false
        }
        axios.post(sysurl2 + 'user/info')
            .then(res => {
                if (res.data.code === 0) {
                    this.users = res.data.USER;
                } else {

                }
            }, err => {

            })
            .catch((error) => {

            })





    },
    methods: {
        clears() {
            delCookie('token');
            delCookie('uid');
            delCookie('sign');
            QC.Login.signOut();
            this.loginshow = true
            // window.location.reload()
            this.$router.push({path: '/', query: {}})
        },
        showthis:function(){
            this.sho = 1
        },

        hidethis:function(){
            this.sho = 0
        },
        showBox: function (item) {

            if (this.navList[item].classCode == 3) {
                this.list = []
                $(event.target).parent().parent().find(".nav-list").hide()
                return false
            }
            $(event.target).parent().parent().find(".nav-list").fadeIn(100)
            this.list = this.navList[item]

        },
        hideBox: function (e) {
            this.list = []
            $(e.target).parent().parent().find(".nav-list").hide()
        },
        skip: function (classType, l) {

            if (classType == "music") {
                this.$router.push({path: '/newSong', query: {classId: l.id}})
            } else if (classType == 'video') {
                this.$router.push({path: '/dv', query: {classId: l.id}})

            } else if (classType == "album") {

                if (l.childList == undefined) {
                    this.$router.push({path: '/taoList', query: {classId: l.id}})
                } else {

                    if (l.childList.length == 0) {
                        this.$router.push({path: '/MusicMan', query: {classId: l.id}})
                    } else {
                        this.$router.push({path: '/taoqu', query: {classId: l.id}})

                    }

                }


            }


        },
        show() {
            if (this.sho == 0) {
                this.sho = 1
            } else {
                this.sho = 0
            }
        },

        showlogin: function () {
            overy_show()
            $(".login-mask").fadeIn()
        },
        link(){
            this.$router.push({path: '/Seach'})

        },
        ops(){
            this.pp = true
        },
        out(){
            this.pp = false;
            $('.login-mask').fadeOut();
        }

    },
    template: `<div class="head clearfix">    
    <vippay v-if="pp==true" :info="users"></vippay>
            <div class="overlay" style="display: block"  v-if="pp==true" @click="out"></div>

			<div class="width1250" style="display: flex;justify-content: space-between;width: 1200px!important;"> 
				<div class="left"> 
					<router-link to="/"><img width="200" class="" src="img/logo.png"/></router-link>
				</div>
				<div class="left">
					<ul class="clearfix top-nav relative">
						<li class="nav-li" v-for="(l,item) in navList" :key="item" v-if="item<6">
							<a @mouseover="showBox(item)" @click="skip(l.classType,l)">{{l.className}}</a>
						</li>
<!--						<li class="nav-li">-->
<!--						<router-link to="/dv" @mouseover.native ="showBox" >DVJ视频</router-link>-->
<!--                        -->
<!--						</li>-->
<!--						<li class="nav-li">-->
<!--							<router-link :to="'/spu?queryCode='+list.queryCode+'&classId='+list.id" @mouseover.native ="showBox" >串烧</router-link>-->
<!--                        -->
<!--						</li>-->
<!--						<li class="nav-li">-->
<!--							<router-link to="/taoqu" @mouseover.native ="showBox">套曲</router-link>-->

<!--						</li>-->
<!--						<li><router-link to="/MusicMan" @mouseover.native ="hideBox">音乐人</router-link></li>-->
						<li><router-link to="/Component" @mouseover.native ="hideBox">商城</router-link></li>
						<li><router-link to="/info">资讯</router-link></li>
						<ul class="nav-list absolute">
								<li v-for="(l,item) in list.childList" :key="item" class=""><a @click="skip(list.classType,l)" :title="l.className">{{l.className}}</a></li>
						</ul>
					</ul>
				</div>
				<div class="right padding_tb10" v-if="loginshow">
					<span class="relative top-secher" @click="link">
						<input type="text" name=""  readonly class="inp-seach" value="" placeholder="搜索音乐 、套曲" />
						<img class="absolute find-img" src="img/icon-find.png"/>
					</span>
					<span class="relative" >
						<a @click="showlogin" class="login-a mg_left10">登录</a>
<!--						<ul class="absolute login-style" style="display: none">-->
<!--							<li><a href="javascript:;" ><img src="img/icon-QQ.png"/>	QQ登录</a></li>-->
<!--							<li><a href="javascript:;" ><img src="img/icon-wx.png"/> 微信登录</a></li>-->
<!--							<li><a href="javascript:;"><img src="img/icon-sj.png"/> 账号登录</a></li>-->
<!--							<li><a href="javascript:;"><img src="img/icon-emil.png"/>邮箱登录</a></li>-->
<!--						</ul>-->
					</span>
				</div>

				<div class="right" v-if="!loginshow">
					<div @click="show" @mousemove="showthis" class="right padding_lr10 text-center my-box" v-if="users != null">
						<img class="vertical-align_m icon-my" :src="users.HEADURL" alt="" id="myheader"/>
						<br />
						<img v-if="users.VIP != 0" class=" vertical-align_m" src="img/vip.png"/><span class="color_ff " style="width:52px;white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;">{{users.GOLD}}金币</span>
						<span class="relative" v-if="sho == 1">
							<ul class="absolute login-style my-list" @mouseleave="hidethis">
								<li><router-link to="/My" ><img src="img/iconmy-01.png"/>我的主页</router-link></li>
								<li><router-link to="/myNews"><img src="img/iconmy-02.png"/>我的消息</router-link></li>
								<li class="vip-a"><a href="javascript:;" @click="ops" ><img src="img/iconmy-03.png"/>VIP会员</a></li>
								<li><router-link to="/userSet"><img src="img/iconmy-04.png"/>个人设置</router-link></li>
								<li><router-link to="/myVip"><img src="img/iconmy-05.png"/>会员中心</router-link></li>
								<li><a  @click="clears"><img src="img/iconmy-06.png"/>退出</a></li>
							</ul>
						</span>
					</div>
					<router-link to="/Car" style="margin: 20px 0 0 9px;" class="right"><img width="22px" src="img/icon-top-card.png"></router-link>
					<div class="right padding_tb10">
						<span class="relative top-secher"   @click="link">
							<input type="text" name="" readonly  value="" placeholder="搜索音乐 、套曲" />
							<img class="absolute find-img" src="img/icon-find.png"/>
						</span>
					</div>
				</div>
			</div>
		</div>`
});

//搜索
var Seach=Vue.component('search', {
    data: function () {
        return {
            count: 0,
            inpu:null,
            type:0,
            data: [],
            mu: [],
            src: [],
            banner: [],
            cu: 1,
            ida: null,
            dl: -1,
            muId: 0,
            scm: false,
            scma: false,
            zjId: 0,
            len:0,
            video:0,
            fk:'',
            ss:'search'

        }
    },
    filters: {
        formdata: function (val) {
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d;
        }
    },
    mounted() {
    },
    methods: {
        changetab: function (type) {
            this.$emit("changetab", type);
        },
        tap(id){
            this.type=id;
            if(this.inpu != null){
                var that = this;
                var formdata = new FormData();
                formdata.append('KEYWORDS', this.inpu)
                formdata.append('showCount', 15)
                formdata.append('currentPage', 1);
                switch (this.type) {
                    case 0:
                        var urls='findConditionMusicList';var sys = sysurl;
                        break;
                    case 1:
                        var urls='findClassIdGetAlbumLis';var sys = sysurl;  formdata.append('classCode', 3);
                        break;
                    case 2:
                        var urls='findClassIdGetAlbumLis'; var sys = sysurl;  formdata.append('classCode', 5);
                        break;
                    case 3:
                        var urls='findConditionVideoList'; that.video=1; var sys = sysurl;
                        break;
                    case 4:
                        var urls='information/list';
                        var sys = sysurl2;
                        break;
                }

                axios.post(sys + urls, formdata).then(res => {
                    if (res.data.code === 0) {
                        this.mu = res.data.data.list
                        this.len = res.data.data.totalResult

                        $("#fen").createPage({
                            pageCount: parseInt(res.data.data.totalPage),
                            current: parseInt(res.data.data.currentPage),
                            backFn: function (p) {
                                that.cu = p
                            }
                        });
                    }
                })
            }

        },
        handelckick: function (e) {

            $(e.target).children('.select-list').fadeIn(100);
            $(e.target).parents(".newuqu-list").siblings().find('.select-list').hide()
            $(e.target).parents("li").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
            $(e.target).parents(".new-list").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix ").siblings().find('.select-list ').hide()
        },
        handelleave: function (e) {
            $(e.target).fadeOut(200)
        },
        zan: function (id) {
            var uid = getCookie('uid');
            if(uid){
                if(this.video==1){
                    axios.post(sysurl + 'isZan?videoId='+id+'&uid='+uid)
                        .then(res => {
                            if (res.data.code === 0) {
                                if (res.data.data.isZan === 0) {
                                    axios.post(sysurl + 'giveZan?videoId='+id+'&uid=' + uid)
                                        .then(res => {
                                            if (res.data.code === 0) {
                                                layer.msg(res.data.message)


                                            } else {

                                            }
                                        }, err => {

                                        })
                                        .catch((error) => {

                                        })
                                } else {
                                    axios.post(sysurl + 'cancelZan?videoId='+id+'&uid='+uid)
                                        .then(res => {
                                            if (res.data.code === 0) {
                                                layer.msg(res.data.message)


                                            } else {

                                            }
                                        }, err => {

                                        })
                                        .catch((error) => {

                                        })
                                }
                                // layer.msg(res.data.message)


                            } else {

                            }
                        }, err => {

                        })
                        .catch((error) => {

                        })
                }else {
                    axios.post(sysurl + 'isZan?musicId=' + id + '&uid=' + uid)
                        .then(res => {
                            if (res.data.code === 0) {
                                if (res.data.data.isZan === 0) {
                                    axios.post(sysurl + 'giveZan?musicId=' + id + '&uid=' + uid)
                                        .then(res => {
                                            if (res.data.code === 0) {
                                                layer.msg(res.data.message)


                                            } else {

                                            }
                                        }, err => {

                                        })
                                        .catch((error) => {

                                        })
                                } else {
                                    axios.post(sysurl + 'cancelZan?musicId=' + id + '&uid=' + uid)
                                        .then(res => {
                                            if (res.data.code === 0) {
                                                layer.msg(res.data.message)


                                            } else {

                                            }
                                        }, err => {

                                        })
                                        .catch((error) => {

                                        })
                                }
                                // layer.msg(res.data.message)


                            } else {

                            }
                        }, err => {

                        })
                        .catch((error) => {

                        })
                }
            }else {
                overy_show()
                $(".login-mask").fadeIn()
            }



        },
        sc(id) {
            this.scm = true
            this.muId = id;

        },
        out() {
            this.scm = false;
            this.scma = false
            $('.login-mask').fadeOut();
        },
        showMessageFromChild(data) {
            this.scm = data;
            this.scma = data;
        },
        pla(id,t) {
            this.fk = t
            this.scma = true;
            this.zjId = id;

        },
        showdownload: function (id, type) {
            overy_show()
            $(".down-mask").fadeIn()
            this.$emit("showdownload", id, type)
        },

        music:function (id) {
            this.$emit("music",id,event.target)
        },
        todetail:function (id) {
            // this.$router.push({path: '/musicList', query: {id: id}})

        },
        sech(){
            var that = this;
            var formdata = new FormData();
            formdata.append('KEYWORDS', this.inpu)
            formdata.append('showCount', 15)
            formdata.append('currentPage', 1);
            switch (this.type) {
                case 0:
                    var urls='findConditionMusicList';var sys = sysurl;
                    break;
                case 1:
                    var urls='findClassIdGetAlbumLis';  formdata.append('classCode', 3);var sys = sysurl;
                    break;
                case 2:
                    var urls='findClassIdGetAlbumLis';   formdata.append('classCode', 5);var sys = sysurl;
                    break;
                case 3:
                    var urls='findConditionVideoList'; that.video=1;var sys = sysurl;
                    break;
                case 4:
                    var urls='information/list';
                    var sys = sysurl2;
                    break;
            }

            axios.post(sys + urls, formdata).then(res => {
                if (res.data.code === 0) {
                    this.mu = res.data.data.list
                    this.len = res.data.data.totalResult
                    $("#fen").createPage({
                        pageCount: parseInt(res.data.data.totalPage),
                        current: parseInt(res.data.data.currentPage),
                        backFn: function (p) {
                            that.cu = p
                        }
                    });
                }
            })

        },
        link(id){
            this.$router.push({ name: 'infoDetail', query: { id: id }})
        }

    },
    watch: {
        cu: function (val, oldval) {
            var that = this;
            var formdata = new FormData();
            formdata.append('KEYWORDS', this.inpu)
            formdata.append('showCount', 15)
            formdata.append('currentPage', val);
            switch (this.type) {
                case 0:
                    var urls = 'findConditionMusicList';
                    var sys = sysurl;
                    break;
                case 1:
                    var urls = 'findClassIdGetAlbumLis';
                    formdata.append('classCode', 3);
                    var sys = sysurl;
                    break;
                case 2:
                    var urls = 'findClassIdGetAlbumLis';
                    formdata.append('classCode', 5);
                    var sys = sysurl;
                    break;
                case 3:
                    var urls = 'findConditionVideoList';
                    that.video = 1;
                    var sys = sysurl;
                    break;
                case 4:
                    var urls = 'information/list';
                    var sys = sysurl2;
                    break;
            }

            axios.post(sys + urls, formdata).then(res => {
                if (res.data.code === 0) {
                    that.mu = res.data.data.list;
                    this.len = res.data.data.totalResult
                }
            })

        },

    },
    template: `<div> 
 <musicsc :muid="muId" :video="video"  v-on:muscm="showMessageFromChild" v-if="scm == true"></musicsc>
     <musicpl :zjid="zjId" :type="2" :fk="fk" v-on:muscm="showMessageFromChild" v-if="scma == true"></musicpl>
    
    <div class="overlay" v-if="scm == true || scma == true" @click="out" style="display: block"></div>
		<div class="relative">
			<img class="width100" src="img/seach-img.png"/>
			<p class="find-inp absolute ">
				<input type="text" v-model="inpu" @input="sech" placeholder="输入您要搜索的关键词" name=""  value="" />
				<img @click="sech" class="absolute" src="img/icon-find.png"/>
			</p>
		</div>
		<div class="seach-box">
			<div class="width1200">
				<div class="padding_tb10">
					搜索“{{inpu}}”，找到<span class="blue">{{len}}</span>首
				</div>
				<div class="danqu-top width1200">
					<a :class="{'active':type==0}" @click="tap(0)">单曲</a>
					<a :class="{'active':type==1}" @click="tap(1)">音乐人</a>
					<a :class="{'active':type==2}" @click="tap(2)">套曲</a>
					<a :class="{'active':type==3}" @click="tap(3)">视频</a>
					<a :class="{'active':type==4}" @click="tap(4)">发现</a>
				</div>
			</div>
		</div>
    	<div class="bg_ff">
    		<div class="width1200 clearfix">
    			<!--单曲-->
    			<div v-if="type==0" style="display: block" class="seach-div active">
    				
	    			<div class="new-wuqu-list">
	    				<h4 class="clearfix bg_b padding_10">
			    			<p class="left">
			    			<span style="margin-left: 66px;">歌名</span>
		    		    </p>
		    		   <p class="right">
		    		  
		    		    	<span>分类</span>
			    			<span>BPM</span>
			    			<span> KEY </span>
			    			<span style="margin-right: 129px;">更新日期</span>
		    		    </p>
			    		</h4>
			    		<div class="clearfix  new-list" v-for="(l,index) in mu">
					    			<p class="left mg_top5" style="display: flex;align-items: center">
						    		
						    		<span class="over-player"><img width="40" height="40" class="bor_r5 vertical-align_m" :src="l.cover"/>
		    				 <span class="icon-videobtn" :id="'all'+ss"><img :id="ss+'-'+l.id" class="vertical-align_m" src="img/icon-zt.png" @click="music(l.id)"/></span>
		    				</span>
                            <span class="text name" @click="todetail(l.id)"><span class="musicname">{{l.musicName}}</span>
			    			<span class="musictag" v-if="l.independent == 1"><img src="img/dubo.png" alt=""></span>
			    			<span class="musictag" v-if="l.free == 1"><img src="img/fufei.png" alt=""></span>
			    									    		</span>
			    									    		</p>
						    		<div class="right">
                                <span>{{l.className}}</span>
				    			<span>{{l.speed}}</span>
				    			<span>{{l.tone}}</span>
				    			<span>{{l.updateTime|formdata}}</span>
						    			<span class="relative select-box  text-center padding_5"  @click.stop="handelckick">
						    				<i class="color_ff">￥{{l.gold }}</i>
						    				<i class="absolute select-list" @mouseleave.prevent="handelleave">
						    					<a @click="zan(l.id)"><img src="img/icon-zan.png">点赞</a>
				    					<a  @click="showdownload(l.id,1)"><img src="img/icon-xz.png">下载</a>
				    					<a @click="sc(l.id)"><img src="img/icon-start.png">收藏</a>
				    					<a @click="pla(l.id)"><img src="img/icon-pl.png">评论</a>
				    					<a @click="pla(l.id,1)"><img src="img/icon-fk.png">反馈</a>
						    				</i>
						    			</span>
						    		</div>
					    		</div>
						
			    	</div>
		    	</div>
		    	<!--音乐人-->
		    	<div v-if="type==1" style="display: block"  class="seach-div">
		    		<div class="clearfix djs-box">
		    			<dl  v-for="l in mu" style="float: left; 
     width: 242px; 
     margin: 10px 16px 10px 16px; 
    border-radius: 5px;
     box-shadow: 0 0 5px 2px rgba(0,0,0,.3); " class="music-list">
							<router-link :to="'/musicManDetail?id='+l.id+'&type=1'" class="width100">
								<dt class="relative"><img :src="l.cover"><p class="absolute muisc-nums">歌曲数量: 
								<span class="blue">{{l.musicCount}}</span></p></dt>
								<dd class="padding_10 bg_ff">
									<h4 class="font_16"> {{l.name}}</h4>
									<p>{{l.last_edit_time}}</p>
								</dd>
							</router-link>
						</dl>
		    		</div>
		    	</div>	
		    	<!--套曲-->
		    	<div v-if="type==2" style="display: block" class="seach-div">
		    		<div class="taoqu-box clearfix">
	    				<dl  v-for="l in mu" style="float: left; 
     width: 242px; 
     margin: 10px 16px 10px 16px; 
    border-radius: 5px;
     box-shadow: 0 0 5px 2px rgba(0,0,0,.3); " class="music-list">
							<router-link :to="'/taoquDetail?id='+l.id+'&type=1'" class="width100">
								<dt class="relative"><img :src="l.cover"><p class="absolute muisc-nums">歌曲数量: 
								<span class="blue">{{l.musicCount}}</span></p></dt>
								<dd class="padding_10 bg_ff">
									<h4 class="font_16"> {{l.name}}</h4>
									<p>{{l.last_edit_time}}</p>
								</dd>
							</router-link>
						</dl>
	    			</div>
		    	</div>
		    	<!--视频-->
		    	<div v-if="type==3" style="display: block" class="seach-div " id="video-box">
		    		<div class="taoqu-box clearfix">
	    					<dl class="music-list relative" style="    float: left;
    width: 242px;
    margin: 10px 16px 10px 16px;
    border-radius: 5px;
    box-shadow: 0 0 5px 2px rgba(0,0,0,.3);" v-for="(l,item) in mu" :key="item">
					    <router-link :to="'/dvplay?id='+l.id" class="width100 absolute video-bof"><img src="img/taoqi-video.png" alt="" /></router-link>
						<dt class="relative">
							<img :src="l.cover">
					     	<div class="absolute muisc-nums">
					     		<p class="left mg_top10"><img src="img/icon-time.png"/>: <span class="color_ff">{{l.times}}</span></p>
					     		<span class="relative select-box  text-center padding_5 right" @click.stop="handelckick" @mouseleave.prevent="handelleave">
				    				<i class="color_ff">￥{{l.gold}}</i>
				    				 <i class="absolute select-list" @mouseleave.prevent="handelleave">
                                        <a @click="zan(l.id,3)"><img src="img/icon-zan.png">点赞</a>
                                        <a @click="download(l.id,2)"><img src="img/icon-xz.png">下载</a>
                                        <a @click="sc(l.id)"><img src="img/icon-start.png">收藏</a>
                                        <a @click="pla(l.id)"><img src="img/icon-pl.png">评论</a>
                                        <a @click="pla(l.id,2)"><img src="img/icon-fk.png">反馈</a>
                                    </i>
				    			</span>
					     	</div>
						</dt>
						<dd class="padding_10 bg_ff">
							<h4 class="font_16 text ">{{l.videoName}}</h4>
							<p class="clearfix mg_top10">
								<span class="left">{{l.updateTime|formdata}}</span>
								<span class="right">{{l.className}}</span>
							</p>
						</dd>
					</dl>
	    			</div>
		    	</div>
		    	<!--发现-->
		    	<div v-if="type==4" style="display: block" class="seach-div">
		    		<div class="fx-box mg_top20">
		    			<dl v-for="l in mu" class="clearfix mg_b20"  @click="link(l.id)">
		    				<dt class="left"><img class="width100" :src="l.cover"/></dt>
		    				<dd class="left">
		    					<h3 class="mg_top10"><strong>{{l.title}}</strong></h3>
		    					<p class="mg_top10">{{l.des}}</p>
		    					<h6 class="mg_top30">
		    						<span class="left">{{l.createat}}</span>
		    						<span class="right">
		    							<a href="javascript:;" class="mg_r20"><img src="img/icon-zan.png"/>  {{l.like_num}} </a>
		    							<a href="javascript:;" class="mg_left20"><img src="img/icon-pl.png"/>  {{l.comment_num}} </a>
		    						</span>
		    					</h6>
		    				</dd>
		    			</dl>
		    		</div>
		    	</div>
		    	
		    	<div class="padding_b50">
			    	 <div class="tcdPageCode mg_top20" id="fen"></div>
			    </div>
    		</div>	
    	</div>
</div> `
});

//购物车
var Car = Vue.component('car', {
    props: ['time'],
    data: function () {
        return {
            data: [],
            zong: 0,
            dan: [],
            num: [],
            checkedCode: [],
            isAllChecked: false,
            checkedImg: [],
            isAllImg: 'img/check.png',
            list: null,
            adds: false,
            pay: false,
            all: [],
            addsId: 0,
            moneys:0,
            oderId:'',
            paysd:false,
            src:'',
            set:null
        }
    },
    created() {
    },
    mounted() {
        axios.post(sysurl2 + 'shopcart/list')
            .then(res => {
                if (res.data.code === 0) {
                    var zong = 0;
                    var dan = this.dan;
                    var num = this.num;
                    var img = [];
                    this.data = res.data.list;
                    for (var i = 0; i < res.data.list.length; i++) {
                        zong += parseFloat(res.data.list[i].price) * res.data.list[i].counts;
                        dan.push(parseFloat(res.data.list[i].price) * res.data.list[i].counts)
                        num.push(res.data.list[i].counts);
                        img.push('img/check.png');
                    }
                    // this.zong = zong
                    this.dan = dan;
                    this.checkedImg = img;
                } else {

                }
            })
        axios.post(sysurl2 + 'user/addressList').then(res => {
            if (res.data.code === 0) {
                this.all = res.data.LIST;
                for (var i = 0; i < res.data.LIST.length; i++) {
                    if (res.data.LIST[i].type == 1) {
                        this.list = res.data.LIST[i];
                        this.addsId = res.data.LIST[i].id
                    }
                }


            }
        })

    },
    methods: {
        ads() {
            this.adds = true
        },
        py() {
            this.pay = true
        },
        singleChecked: function (i,money,c,event) {
            var s=this.$refs.checks;
            if($(event.target).prop('checked')){
                this.zong+=money
            }else {
                this.zong-=money
            }
            // s.each(function (sas) {
            //
            // })

            // if(c[index]){
            //     this.zong+=money
            // }else {
            //     this.zong-=money
            // }
            //判断每一个CheckBox是否选中，全选中让全选按钮选中
            if (this.data.length == this.checkedCode.length) {
                this.isAllChecked = true;
             ;
                // this.isAllImg = 'img/check-checked.png';
                // Vue.set(this.checkedImg,i,'img/check-checked.png');

            } else {  // 只要有一个checkbox不选中，让全选按钮不选中
                this.isAllChecked = false;
                // this.zong-=money;
                // this.isAllImg = 'img/check.png';
                // Vue.set(this.checkedImg,i,'img/check.png');
            }
        },

        // 用户全选
        chooseAll: function (e) {
            var that = this;

            var zong=0
            // that.checkedmoney = [];
            if (that.checkedCode.length != 0) {
                that.checkedCode = [];

                // that.checkedImg.push('img/check.png');
            }
            if (that.isAllChecked) {
                that.checkedCode = [];
                that.zong=0
                // that.checkedImg.push('img/check.png');
                // that.isAllImg = 'img/check.png';
            } else {
                that.data.forEach(function (singlePersonList) {
                    that.checkedCode.push(singlePersonList.id);
                    for (var i = 0; i < this.data.length; i++) {
                        zong += parseFloat(this.data[i].price) * this.data[i].counts;

                    }
                    that.zong=zong/this.data.length
                    // that.checkedImg.push('img/check-checked.png')
                    // that.isAllImg = 'img/check-checked.png';
                }, that)

            }
        },
        cut(e, counts, price, index, id) {
            var nums = this.num[index];

                var zong = this.zong;


            var pic = price;
            var form = new FormData()
            form.append('id', id)
            if (nums <= 1) {
                nums = 1;
                form.append('counts', nums)
            } else if (nums > 1) {
                nums--;
                form.append('counts', nums);
                if(zong != 0){
                    zong = zong - pic;
                    this.zong = zong
                }

            }
            var news = nums * pic;
            // $(e.target).siblings('.nums').val(nums);
            // $(e.target).parents('.num-box').siblings('.price').html(news);
            Vue.set(this.dan, index, news)
            Vue.set(this.num, index, nums)
            // $(e.target).parents('.num-box').siblings('.money-list').html(nums*pic);

            axios.post(sysurl2 + 'shopcart/updateCounts', form)
                .then(res => {
                    if (res.data.code === 0) {
                    } else {

                    }
                })
        },
        add(e, counts, price, index, id) {
            var zong = 0;
            var form = new FormData();
            form.append('id', id)
            var nums = parseInt($(e.target).siblings('.nums').val());
            console.log(nums)
            var pic = price;
            if(this.zong != 0){
                zong = parseFloat(this.zong) + parseFloat(pic);
                this.zong = zong;
            }

            nums++;
            form.append('counts', nums)
            // console.log(nums)
            var news = nums * pic;
            // $(e.target).siblings('.nums').val(nums);
            Vue.set(this.dan, index, news);
            Vue.set(this.num, index, nums)
            // $(e.target).parents('.num-box').siblings('.price').html(nums*pic);
            // $(e.target).parents('.num-box').siblings('.money-list').html(nums*pic);

            axios.post(sysurl2 + 'shopcart/updateCounts', form)
                .then(res => {
                    if (res.data.code === 0) {
                    } else {

                    }
                })
        },
        del(id, index) {
            var form = new FormData();
            form.append('id', id)
            axios.post(sysurl2 + 'shopcart/delete', form)
                .then(res => {
                    if (res.data.code === 0) {
                        layer.msg(res.data.message);
                        axios.post(sysurl2 + 'shopcart/list')
                            .then(res => {
                                if (res.data.code === 0) {
                                    var zong = 0;
                                    var dan = this.dan;
                                    var num = this.num;
                                    num.splice(index, 1);
                                    dan.splice(index, 1);
                                    this.data = res.data.list;
                                    for (var i = 0; i < res.data.list.length; i++) {
                                        zong += parseFloat(res.data.list[i].price) * res.data.list[i].counts;
                                        // dan.push(parseFloat(res.data.list[i].price)*res.data.list[i].counts)
                                        // num.push(res.data.list[i].counts)
                                    }
                                    this.zong = zong;
                                    this.dan = dan;
                                    this.num = num
                                    console.log(this.dan)
                                } else {

                                }
                            })
                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })

        },
        sub() {
            if(this.addsId){
                var ids = this.checkedCode.join(',');

                var form = new FormData();
                form.append('ids', ids)
                form.append('addressId', this.addsId);
                axios.post(sysurl2 + 'order/createOrder', form).then(res => {
                    if (res.data.code === 0) {
                        this.pay = true;
                        this.moneys=res.data.realPay
                        this.oderId=res.data.orderNo
                    } else {
                        layer.msg(res.data.message)
                    }
                })
            }else {
                layer.msg('请选择收货地址')
            }

        },
        mo(e, id) {
            var nums = $(e.target).val();
            var form = new FormData();
            form.append('counts', nums);
            form.append('id', id);
            axios.post(sysurl2 + 'shopcart/updateCounts', form)
                .then(res => {
                    if (res.data.code === 0) {
                    } else {

                    }
                })
        },

        cl(id) {
            var formdata = new FormData();
            formdata.append('id', id)
            this.addsId = id
            axios.post(sysurl2 + 'user/setDefault', formdata).then(res => {
                if (res.data.code === 0) {
                    axios.post(sysurl2 + 'user/addressList').then(res => {
                        if (res.data.code === 0) {
                            this.all = res.data.LIST;
                            for (var i = 0; i < res.data.LIST.length; i++) {
                                if (res.data.LIST[i].type == 1) {
                                    this.list = res.data.LIST[i];
                                }
                            }


                        }
                    })
                } else {
                    layer.msg(res.data.message)
                }
            })
        },
        out() {
            this.adds = false
            this.pay = false
            this.paysd = false;
            $('.login-mask').fadeOut();
        },
        payDs(){
            var that = this;
            var formdata = new FormData();
            formdata.append('orderNo', this.oderId);
            formdata.append('isWeb', 1);
            formdata.append('type', 1);
            axios.post(sysurl2 + 'order/orderPay',formdata).then(res => {
                if (res.data.code === 0) {
                    this.pay = false;
                    this.paysd = true;
                    this.src=res.data.data.qrCodeImage
                    var fors=new FormData();
                    fors.append('orderNo',  res.data.data.orderNo)
                    fors.append('type', 2)
                    that.set=setInterval(function () {

                        axios.post(sysurl2 + 'pay/getOrderStatus', fors).then(res => {
                            if (res.data.code === 0) {
                                if(res.data.flag == true){
                                    layer.msg('支付成功！');
                                    clearInterval(that.set);
                                    that.adds = false
                                    that.pay = false
                                    that.paysd = false;
                                    $('.login-mask').fadeOut();
                                }
                            }else {
                                layer.msg(res.data.message)
                            }
                        })

                    },2000)
                }
            })
        },
        alypay(){
            var formdata = new FormData();
            formdata.append('orderNo', this.oderId);
            formdata.append('isWeb', 1);
            formdata.append('type', 2);
            axios.post(sysurl2 + 'order/orderPay',formdata).then(res => {
                if (res.data.code === 0) {
                    $('#ops').html(res.data.data.orderString)
                }
            })
        },
    },
    template: `	
    <div class="bg_ff" style="padding-bottom: 50px">
    <b id="ops"></b>
    <!--选择地址-->
    <div class="big-mask address-box" v-if="adds == true" style="display: block">
    <h4 class="padding_10 text-center mask-tittle color_ff font_16">选择地址</h4>
    <div class="mg_top20 buy-box" style="border: none;padding-bottom: 40px;">
        <table border="" cellspacing="" cellpadding="" class="goods-tab">
        <tbody>
        <tr class="padding_10">
        <th></th>
        <th>收货人</th>
        <th>电话/手机</th>
        <th>详细地址</th>
        </tr>
        <tr v-for="l in all" class="spun-box">
        <td>
        <span class="check-box" @click="cl(l.id)">
    <label >
                        <img v-if="l.type == 0" src="img/rideo.png">
                           <img v-if="l.type == 1" src="img/rideo-select.png">
                        </label>
<!--    <input type="radio" name="address" id="checkbox1" class="check" hidden="hidden" value="">-->
    </span>
        </td>
        <td class="address-name">{{l.name}}</td>
        <td class="address-phone">{{l.phone}}</td>
        <td class="address">{{l.region+l.address}}</td>
        </tr>
        </tbody>
    </table>
    </div>
    </div>
    <!--支付方式-->
    <div class="mask pay-mask" style="display: block" v-if="pay==true">
    <h4 class="padding_10 text-center mask-tittle color_ff">选择支付方式</h4>
    <div class="pay-font1 mg_tb20 padding_lr30">
    <h4 class="font_16"><img class="vertical-align_m" width="20" src="img/tj.png"/>提交订单</h4>
    <p class="mg_top20">先购先得，请尽快完成支付！</p>
    <p class="mg_top10">支付金额：<span class="red">￥{{moneys}}</span></p>
    </div>
    <div class="pay-iconbox mg_tb20 text-center">
        <a href="javascript:;" @click="payDs" class="mg_r20"><img width="30" class="vertical-align_m " src="img/pay-icon-wx.png"/> 微信支付</a>
        <a href="javascript:;" @click="alypay" class="mg_left20"><img width="30" class="vertical-align_m " src="img/pay-icon-pay.png"/> 支付宝支付</a>
        </div>
    </div>
    <div v-if="paysd==true"  class="imges er-mask" style="background: #fff;width: 500px;height: 306px;border-radius: 10px;overflow: hidden;position: absolute;margin: auto;left:0;right:0;top:0;bottom:0;z-index: 10">
 <h4 class="mask-tittle color_ff padding_10 text-center" style="width: auto">微信支付</h4>
             <img :src="src" style="width: 190px;margin: auto;display: block;margin-top: 20px" alt="">
             <p style="font-size: 16px;text-align: center;margin-top: 15px">请使用微信扫二维码支付！</p>
</div>
<!--   <div style="display: block;width: 340px;height: 340px;position: absolute;margin: auto;left:0;right:0;top:0;bottom:0;z-index: 20" v-if="paysd == true">-->
<!--        <img :src="src" style="display: block;width: 100%;height: 100%" alt="">-->
<!--    </div>-->
    <div class="overlay" @click="out" v-if="adds == true || pay == true || paysd == true" style="display: block"></div>
    <div class="width1200 ">
    
    <div class="padding_tb10 bor_b mg_top20 font_18">
      购物车
    </div>

    <div class="mg_top20 buy-box">
    <h4 class="bg_f5 padding_10">收货地址</h4>
    <p class="padding_10 color_55 mg_top10" v-if="list != null">
    <span class="left">收货人信息：【默认】{{list.region+list.address}}</span>
    <a href="javascript:;" @click="ads" class="address-a right blue mg_r20">选择地址</a>
    </p>
     <p class="padding_10 color_55 mg_top10" v-if="list == null">
    <span class="left">暂无地址</span>
    <router-link to="/myVip?num=4"   class="address-a right blue mg_r20">添加地址</router-link>
    </p>
    <p class="padding_10 color_55 mg_tb20">支付方式：在线支付</p>
    
    </div>
        <div class="mg_top20 buy-box">
            
            <table border="" cellspacing="" cellpadding="" class="goods-tab">
            <tr class="padding_10">
            <th  class="text_left ">
            <span class="check-box left mg_top5" v-on:click='chooseAll'  style="margin-left: 5px;">
    <label for="checkbox">全选</label>
    <input type="checkbox" style="width: 15px;height: 15px;vertical-align: middle;"  v-model='isAllChecked'  name="checkbox1" id="checkbox" class="allcheck" value="">
    </span>
            </th>
            <th colspan="2">商品</th>
            <th>金额</th>
            <th>数量</th>
            <th>小计(元)</th>
            <th>操作</th>
            </tr>
            <tr class="bg_f5">
            <td colspan="6" class="text_left " >全部商品（{{data.length}}）</td>
            </tr>
            <tr class="spun-box" v-for="(l,index) in data">
            <td>
            <span class="check-box">
    <label for="checkbox1"></label>
    <input type="checkbox" @change="singleChecked(index,dan[index],checkedCode,$event)" ref="checks"  style="width: 15px;height: 15px;vertical-align: middle;" :value="l.id" v-model="checkedCode" name="checkbox1" id="checkbox1" class="check" >
    </span>
            </td>
            <td class="goods_img_box"><img class="goods_img" :src="l.coverUrl" alt="" /></td>
            <td class="goods-infor text_over">{{l.goodName}}</td>
            <td class="price">{{dan[index]}}</td>
            <td class="num-box">
            <a href="javascript:;" @click.stop="cut($event,l.counts,l.price,index,l.id)" class="cut">-</a>
            <input type="number" name="" readonly @change="mo($event,l.id)" min="1"  :value="num[index]" class="nums" />
            <a href="javascript:;" @click.stop="add($event,l.counts,l.price,index,l.id)" class="add">+</a>
            </td>
            <td class="money-list">{{dan[index]}}</td>
            <td><a href="javascript:;"  @click="del(l.id,index)"><img class="vertical-align_m mg_r5" src="img/img_deleted.png" alt="" />删除</a></td>
            </tr>
            

            </table>
            <div class="text_right padding_lr30 mg_top20">
            <h4 class="clearfix">
            <span class="left">已选择<i class="goods_nums">{{checkedCode.length}}</i>件商品</span>
            <a href="javascript:;" @click="sub" class="buy-a right mg_left20">结算</a>
                <span class="right mg_top10">合计：<strong class="font_16 red">￥{{zong}}</strong></span>
            </h4>
            
            <p class="mg_tb20"></p>
            </div>
        </div>
    </div>
    </div>
    		`
});
//立即购买
var payOder = Vue.component('payoder', {
    data: function () {
        return {
            data: [],
            all: [],
            adds: false,
            pay: false,
            list: null,
            nums: 0,
            zong: 0,
            oderId:'',
            moneyr:0,
            paysd:false,
            src:''
        }
    },
    mounted() {
        var id = this.$route.query.id;
        this.goodsId = this.$route.query.id;
        this.nums = this.$route.query.num


        var formdata = new FormData();
        formdata.append('id', id)
        axios.post(sysurl2 + 'goods/view', formdata)
            .then(res => {
                if (res.data.code === 0) {
                    this.data = res.data.good;
                    this.zong = res.data.good.price * this.$route.query.num
                } else {

                }
            }, err => {

            })
            .catch((error) => {

            })
        axios.post(sysurl2 + 'user/addressList').then(res => {
            if (res.data.code === 0) {
                this.all = res.data.LIST;
                for (var i = 0; i < res.data.LIST.length; i++) {
                    if (res.data.LIST[i].type == 1) {
                        this.list = res.data.LIST[i];
                        this.addsId = res.data.LIST[i].id
                    }
                }


            }
        })

    },
    methods: {
        payDs(){
            var that = this;
            var formdata = new FormData();
            formdata.append('orderNo', this.oderId);
            formdata.append('isWeb', 1);
            formdata.append('type', 1);
            axios.post(sysurl2 + 'order/orderPay',formdata).then(res => {
                if (res.data.code === 0) {
                    this.pay = false;
                    this.paysd = true;
                    this.src=res.data.data.qrCodeImage
                    var fors=new FormData();
                    fors.append('orderNo',  res.data.data.orderNo)
                    fors.append('type', 2)
                    that.set=setInterval(function () {

                        axios.post(sysurl2 + 'pay/getOrderStatus', fors).then(res => {
                            if (res.data.code === 0) {
                                if(res.data.flag == true){
                                    layer.msg('支付成功！');
                                    clearInterval(that.set);
                                    that.adds = false
                                    that.pay = false
                                    that.paysd = false
                                    $('.login-mask').fadeOut();
                                }
                            }else {
                                layer.msg(res.data.message)
                            }
                        })

                    },2000)
                }
            })
        },
        alypay(){
            var formdata = new FormData();
            formdata.append('orderNo', this.oderId);
            formdata.append('isWeb', 1);
            formdata.append('type', 2);
            axios.post(sysurl2 + 'order/orderPay',formdata).then(res => {
                if (res.data.code === 0) {
                    $('#ops').html(res.data.data.orderString)
                }
            })
        },
        ads() {
            this.adds = true
        },

        cut(e) {
            if (this.nums > 1) {
                this.nums--;

            }
            this.zong = this.nums * this.data.price

        },
        add(e) {

            this.nums++;
            this.zong = this.nums * this.data.price
        },
        out() {
            this.adds = false
            this.pay = false
            this.paysd = false
            $('.login-mask').fadeOut();
        },
        cl(id) {
            var formdata = new FormData();
            formdata.append('id', id)
            this.addsId = id
            axios.post(sysurl2 + 'user/setDefault', formdata).then(res => {
                if (res.data.code === 0) {
                    axios.post(sysurl2 + 'user/addressList').then(res => {
                        if (res.data.code === 0) {
                            this.all = res.data.LIST;
                            for (var i = 0; i < res.data.LIST.length; i++) {
                                if (res.data.LIST[i].type == 1) {
                                    this.list = res.data.LIST[i];
                                }
                            }


                        }
                    })
                } else {
                    layer.msg(res.data.message)
                }
            })
        },
        sub() {
            if(this.addsId){
                var formdata = new FormData();
                formdata.append('addressId', this.addsId)
                formdata.append('goodsId', this.goodsId)
                formdata.append('counts', this.nums)
                axios.post(sysurl2 + 'order/directlyOrder', formdata).then(res => {
                    if (res.data.code === 0) {
                        this.pay = true;
                        this.oderId=res.data.orderNo
                        this.moneyr=res.data.realPay
                    }
                })
            }else {
                layer.msg('请选择收货地址!')
            }

        }
    },
    template: `	
    <div class="bg_ff" style="padding-bottom: 50px">
    <b id="ops"></b>
    <!--选择地址-->
    <div class="big-mask address-box" v-if="adds == true" style="display: block">
    <h4 class="padding_10 text-center mask-tittle color_ff font_16">选择地址</h4>
    <div class="mg_top20 buy-box" style="border: none;padding-bottom: 40px;">
        <table border="" cellspacing="" cellpadding="" class="goods-tab">
        <tbody>
        <tr class="padding_10">
        <th></th>
        <th>收货人</th>
        <th>电话/手机</th>
        <th>详细地址</th>
        </tr>
        <tr v-for="l in all" class="spun-box">
        <td>
        <span class="check-box" @click="cl(l.id)">
    <label >
                        <img v-if="l.type == 0" src="img/rideo.png">
                           <img v-if="l.type == 1" src="img/rideo-select.png">
                        </label>
<!--    <input type="radio" name="address" id="checkbox1" class="check" hidden="hidden" value="">-->
    </span>
        </td>
        <td class="address-name">{{l.name}}</td>
        <td class="address-phone">{{l.phone}}</td>
        <td class="address">{{l.region+l.address}}</td>
        </tr>
        </tbody>
    </table>
    </div>
    </div>
    <!--支付方式-->
    <div class="mask pay-mask" style="display: block" v-if="pay==true">
    <h4 class="padding_10 text-center mask-tittle color_ff">选择支付方式</h4>
    <div class="pay-font1 mg_tb20 padding_lr30">
    <h4 class="font_16"><img class="vertical-align_m" width="20" src="img/tj.png"/>提交订单</h4>
    <p class="mg_top20">先购先得，请尽快完成支付！</p>
    <p class="mg_top10">支付金额：<span class="red">￥{{moneyr}}</span></p>
    </div>
    <div class="pay-iconbox mg_tb20 text-center">
        <a  @click="payDs" class="mg_r20"><img width="30" class="vertical-align_m " src="img/pay-icon-wx.png"/> 微信支付</a>
        <a @click="alypay" class="mg_left20"><img width="30" class="vertical-align_m " src="img/pay-icon-pay.png"/> 支付宝支付</a>
        </div>
    </div>
    <div v-if="paysd==true"  class="imges er-mask" style="background: #fff;width: 500px;height: 306px;border-radius: 10px;overflow: hidden;position: absolute;margin: auto;left:0;right:0;top:0;bottom:0;z-index: 10">
 <h4 class="mask-tittle color_ff padding_10 text-center" style="width: auto">微信支付</h4>
             <img :src="src" style="width: 190px;margin: auto;display: block;margin-top: 20px" alt="">
             <p style="font-size: 16px;text-align: center;margin-top: 15px">请使用微信扫二维码支付！</p>
</div>
    
    <div class="overlay" @click="out" v-if="adds == true || pay == true || paysd == true" style="display: block"></div>
    <div class="width1200 ">
    
    <div class="padding_tb10 bor_b mg_top20 font_18">
      立即购买
    </div>

    <div class="mg_top20 buy-box">
    <h4 class="bg_f5 padding_10">收货地址</h4>
    <p class="padding_10 color_55 mg_top10" v-if="list != null">
    <span class="left">收货人信息：【默认】{{list.region+list.address}}</span>
    <a href="javascript:;" @click="ads" class="address-a right blue mg_r20">选择地址</a>
    </p>
    <p class="padding_10 color_55 mg_top10" v-if="list == null">
    <span class="left">暂无地址</span>
    <router-link to="/myVip?num=4"   class="address-a right blue mg_r20">添加地址</router-link>
    </p>
    <p class="padding_10 color_55 mg_tb20">支付方式：在线支付</p>
    
    </div>
        <div class="mg_top20 buy-box">
            
            <table border="" cellspacing="" cellpadding="" class="goods-tab">
            <tr class="padding_10">
         
            <th colspan="2">商品</th>
            <th>金额</th>
            <th>数量</th>
            <th>小计(元)</th>
            </tr>
            <tr class="spun-box">
          
            <td class="goods_img_box"><img class="goods_img" :src="data.coverUrl" alt="" /></td>
            <td class="goods-infor text_over">{{data.goodName}}</td>
            <td class="price">{{data.price}}</td>
            <td class="num-box">
            <a href="javascript:;" @click.stop="cut()" class="cut">-</a>
            <input type="number" name="" readonly v-model="nums" min="1"  value="" class="nums" />
            <a href="javascript:;" @click.stop="add()" class="add">+</a>
            </td>
            <td class="money-list">{{data.price}}</td>
           
            </tr>
            

            </table>
            <div class="text_right padding_lr30 mg_top20">
            <h4 class="clearfix">
            <a href="javascript:;" @click="sub" class="buy-a right mg_left20">结算</a>
                <span class="right mg_top10">合计：<strong class="font_16 red">￥{{zong}}</strong></span>
            </h4>
            
            <p class="mg_tb20"></p>
            </div>
        </div>
    </div>
    </div>
    		`
});


//banner
Vue.component('banner-component', {
    data: function () {
        return {
            info: [],
            banner: []


        }
    },
    props:["type"],
    mounted() {

        var data = {};
        data.type = this.type;
        axios.post(sysurl + 'banner/list?type='+this.type)
            .then(res => {
                if (res.data.code === 0) {
                    this.banner = res.data.data.list;

                    // banner(1,function(e){
                    // let list = res.data.data.list
                    // let html = '';
                    // for (s in list){
                    //     let type = list[s].type;	//暂无
                    //     html+=`<div class="swiper-slide"><a href="${list[s].href}"><img src="${list[s].img}"/></a></div>`
                    // }
                    // $('#banner-cen').html(html)
                    //轮播

                    this.$nextTick(() => {  // 下一个UI帧再初始化swiper
                        var swiper = new Swiper('#banner .swiper-container', {

                            loop: true,
                            speed: 900,
                            autoplay: {
                                delay: 3000, //3秒切换一次
                                disableOnInteraction: false
                            },
                            observer: true,//修改swiper自己或子元素时，自动初始化swiper
                            observeParents: true,//修改swiper的父元素时，自动初始化swiper

                            pagination: {
                                el: '.swiper-pagination',
                                clickable: true,
                                // renderBullet: function (index, className) {
                                //     var str = "<span class='" + className +"'></span>";
                                //     return  str;
                                // },
                            },
                        })
                    });

                    // })
                } else {

                }
            }, err => {

            })
            .catch((error) => {

            })


    },
    methods: {
        // changetab:function (type) {
        //     this.$emit("changetab",type);
        // }


    },

    template: `<div class="width100">
			<div id="banner" class="banner">
				<div class="swiper-container" loop="true">
				    <div class="swiper-wrapper" id="banner-cen" >
				    	<div class="swiper-slide" v-for="(b,item) in banner" :key="item">
                            <a :href="b.href" target="_blank" style="width: 100%;height: 100%">
                                <img :src="b.img"/>
                            </a>
				    	</div>
				  
				    </div>
				    <!-- Add Pagination -->
				    <div class="swiper-pagination"></div>
				  </div>
			</div>
		</div>`
});


//footer

Vue.component('footer-component', {
    data: function () {
        return {
            count: 0,
            info: '',
            link: []
        }
    },
    mounted() {
        axios.post(sysurl + 'webBasic?id=1')
            .then(res => {
                if (res.data.code === 0) {
                    this.info = res.data.data;

                } else {

                }
            }, err => {

            })
            .catch((error) => {

            })

        axios.post(sysurl + 'website?isEnable=1')
            .then(res => {
                if (res.data.code === 0) {
                    this.link = res.data.data.list;

                } else {

                }
            }, err => {

            })
            .catch((error) => {

            })

    },
    methods: {


        layermsg(mesage) {
            layer.msg(mesage)
        }

    },
    template: `

    <div class="footer">
	    		<div class="width1200 clearfix">
	    			<div class="footer-left left">
	    				<p><img width="150" :src="info.log"/></p>
	    				<div class="mg_top10">
	    					<p class="mg_left20 color_ff">{{info.dj_time}}</p>
	    					<p class="color_ff mg_top10">{{info.name}} {{info.url_name}} </p>
<!--	    					<p class="color_ff mg_top10">免责声明:本站全部舞曲免费在线试听，请在下载后24小时内删除，否则后果与本站无关，如喜欢音乐请购买正版，其所有权为DJ及所属公司拥有</p>-->
	    					<p class="color_ff mg_top10">{{info.licence1}}</p>
	    					<p class="color_ff mg_top10">{{info.licence2}}</p>
	    					<p class="color_ff mg_top10">{{info.icp}}</p>
	    				</div>
	    			</div>
	    			<div class="left footer-moiddle">
    					<div class="clearfix text-center">
    						<div class="left mg_r20">
    							<h4 class="color_ff"><strong>Android</strong></h4>
    							<p class="color_ff mg_top40"><img width="130" :src="info.android_url"/></p>
    						</div>
    						<div class="left mg_left20">
    							<h4 class="color_ff"><strong>IOS</strong></h4>
    							<p class="color_ff mg_top40"><img width="130" :src="info.ios_url"/></p>
    						</div>
    					</div>
    				</div>
    				<div class="left footer-right">
    					<div class="clearfix text-center">
    						<div class="left mg_r20" id="footer-link">
    							<h4 class="color_ff"><strong>RNBDJ</strong></h4>
    							<p class="color_ff mg_top40">客服电话：{{info.tel}}</p>
    							<p class="color_ff mg_top20">客服Q Q：{{info.qq}}</p>
    							<p class="color_ff mg_top20">客服微信：{{info.wechat}}</p>
    							<p class="color_ff mg_top20" @click="layermsg(info.key_word)" style="text-align: left;cursor: pointer">免责声明</p>
    						</div>
    						<div class="left mg_left20">
    							<h4 class="color_ff"><strong>友情链接</strong></h4>
    							<div class="color_ff max-h">
    							    <p class="mg_top20" v-for="(l,item) in link" :key="item"><a :href="l.url" class="color_ff linkbox"><img class="linkicon" :src="l.ico" alt="">{{l.name}}</a></p>

                                </div>
    						
    						</div>
    					</div>
    				</div>
	    		</div>
	    	</div>
	    	
`
});

//舞曲
Vue.component('dance-component', {
    data: function () {
        return {
            info: [],
            dance: [],
            muId: 0,
            scm: false,
            scma: false,
            zjId: 0,
            songlist: '',
            fk:'',
            nozan:'img/icon-zan.png',
            yzan:'img/icon-xz.png',
            s:''

        }
    },
    filters: {
        formdata: function (val) {
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y.toString().substr(2, 2) + '-' + MM + '-' + d;
        }
    },
    props: ["homelist"],
    mounted() {

        this.$options.methods.getDance(this, this.homelist)

    },
    watch: {
        "homelist": function () {
            this.$options.methods.getDance(this, this.homelist)
        }
    },

    methods: {
        getDance: function (obj, val) {
            var data = {};
            for (list in val) {
                if (val[list].classCode == 1) {
                    obj.songlist = val[list]
                    axios.post(sysurl + 'findIdGetMusicList?classId=' + obj.songlist.id+'&showCount=15')

                        .then(res => {
                            if (res.data.code === 0) {
                                obj.dance = res.data.data.list;
                            } else {

                            }
                        }, err => {

                        })
                        .catch((error) => {

                        })
                }

            }

        },
        handelckick: function (e) {

            $(e.target).children('.select-list').fadeIn(100);
            $(e.target).parents(".newuqu-list").siblings().find('.select-list').hide()
            $(e.target).parents("li").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
            $(e.target).parents(".new-list").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix ").siblings().find('.select-list ').hide()
        },
        handelleave: function (e) {
            $(e.target).fadeOut(200)
        },
        zan: function (id) {
            var uid = getCookie('uid');
            if(uid){
                axios.post(sysurl + 'isZan?musicId=' + id + '&uid=' + uid)
                    .then(res => {
                        if (res.data.code === 0) {
                            if (res.data.data.isZan === 0) {
                                axios.post(sysurl + 'giveZan?musicId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            } else {
                                axios.post(sysurl + 'cancelZan?musicId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            }
                            // layer.msg(res.data.message)


                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }else {
                overy_show()
                $(".login-mask").fadeIn()
            }

        },
        download: function (id, type) {
            overy_show()
            $(".down-mask").fadeIn()
            this.$emit("showdownload", id, type)
        },

        playMusic: function (id) {
            this.$emit("playMusic", id, event.target)
        },

        sc(id) {
            this.scm = true
            this.muId = id;

        },
        out() {
            this.scm = false
            this.scma = false;
            $('.login-mask').fadeOut();
        },
        showMessageFromChild(data) {
            this.scm = data
            this.scma = data;
        },
        pla(id,t) {

            this.fk = t
            this.scma = true;
            this.zjId = id;

        },
        skip() {

            this.$router.push({
                path: '/newSong',
                query: {queryCode: this.songlist.queryCode, classId: this.songlist.id}
            })

        },
        todetail: function (id) {
            // this.$router.push({path: '/musicList', query: {id: id}})
        },
        iszan(id) {
            var _this = this
            var uid = getCookie('uid');

            if(uid == null){
                return _this.nozan
            }else{
                //
                // $.ajax({
                //     type : "POST", //提交方式
                //     url : sysurl + 'isZan',//路径
                //     headers:{"token":getCookie("token")},
                //     data : {
                //         "musicId":id,
                //         "uid":uid,
                //     },//数据，这里使用的是Json格式进行传输
                //     success : function(res) {//返回数据根据结果进行相应的处理
                //         if (res.data.isZan === 0) {
                //             _this.s =  _this.nozan
                //         } else {
                //             _this.s =  _this.yzan
                //         }
                //     }
                // });


                return _this.s

                }

        },


    },
    computed: {
        // 计算属性的 getter

    },

    template: `<div class="indexbox">
  <musicsc :muid="muId" :video="0"  v-on:muscm="showMessageFromChild" v-if="scm == true"></musicsc>
     <musicpl :zjid="zjId" :type="2" :fk="fk" v-on:muscm="showMessageFromChild" v-if="scma == true"></musicpl>
      
    <div class="overlay" v-if="scm == true || scma == true"  @click="out" style="display: block"></div>
		    			<h4 class="tittle padding_10 bor_b clearfix">
		    				<p class="left">
	    						<img width="30" height="30" style="object-fit: cover;border-radius: 50%" class="vertical-align_m mg_r10" :src="songlist.cover"/>
			    				<strong class="blue font_16">最新 <span class="color_00">{{songlist.className}}</span></strong>
			    				<strong class="color_b">latest dance</strong>
		    				</p>

		    				<a @click="skip" class="right basic_a blue bor_b_blue">查看更多&gt;&gt;  </a>
		    			</h4>
		    			<div class="new-wuqu-list">
    				<div class="clearfix bg_b padding_10">
    				


		    			<p class="left">
			    			<span style="margin-left: 120px;">歌名</span>
		    		    </p>
		    		   <p class="right">
		    		  
		    		    	<span>分类</span>
			    			<span>BPM</span>
			    			<span> KEY </span>
			    			<span style="margin-right: 115px;">更新日期</span>
		    		    </p>
		    		</div>
				<div class="clearfix  new-list" v-for="(l,item) in dance" :key="item" >
		    			<p class="left" style="display: flex;align-items: center">
		    			   <span :class="{
        'red left': item===0,
        'red1 left': item===1,
        'blue left': item===2,
        'color_9 left': item>2,
        }" style="min-width: 30px">
        <strong>{{item+1}}</strong>
        </span>
		    				<span class="over-player"><img width="40" height="40" class="bor_r5 vertical-align_m" :src="l.cover"/>
		    				 <span class="icon-videobtn" :id="'all'+songlist.id"><img :id="songlist.id+'-'+l.id" class="vertical-align_m" src="img/icon-zt.png" @click="playMusic(l.id)"/></span>
		    				</span>


			    			<span class="text name" @click="todetail(l.id)"><span class="musicname">{{l.musicName}}</span>
			    			<span class="musictag" v-if="l.independent == 1"><img src="img/dubo.png" alt=""></span>
			    			<span class="musictag" v-if="l.free == 1"><img src="img/fufei.png" alt=""></span>


			    			</span>
			    		</p>
			    		<div class="right">
			    			
                                <span>{{l.className}}</span>
				    			<span>{{l.speed}}</span>
				    			<span>{{l.tone}}</span>
				    			<span>{{l.updateTime|formdata}}</span>
			    			<span class="relative select-box  text-center padding_5" @click.stop="handelckick">
			    				<i class="color_ff" >￥{{l.gold}}</i>
			    			   <i class="absolute select-list" @mouseleave.prevent="handelleave">
                                                            <a @click="zan(l.id)"><img src="img/icon-zan.png">点赞</a>
                                                            <a @click="download(l.id,1)"><img src="img/icon-xz.png">下载</a>
                                                            <a @click="sc(l.id)"><img src="img/icon-start.png">收藏</a>
                                                            <a @click="pla(l.id)"><img src="img/icon-pl.png">评论</a>
                                                            <a @click="pla(l.id,1)"><img src="img/icon-fk.png">反馈</a>
                                                        </i>
			    			</span>
			    		</div>
		    		</div>

    		   </div>
		    			
	    			</div>`
});

//首页top榜
Vue.component('toplist-component', {
    data: function () {
        return {
            info: [],
            man: [],
            list: []


        }
    },
    filters: {
        formdata: function (val) {
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d;
        }
    },
    mounted() {
        this.$options.methods.getDance(this)
    },
    methods: {
        changetab: function (type) {
            this.$emit("changetab", type);
        },
        getDance: function (obj) {
            var data = {};
            data.tableName = '';

            axios.post(sysurl + 'musicTopList?tableName=p&showCount=10&currentPage=1&dateType=m')
                .then(res => {
                    if (res.data.code === 0) {
                        obj.list = res.data.data.list;

                        // })
                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })
        },
        todetail: function (id) {
            // this.$router.push({path: '/musicList', query: {id: id}})
        }


    },

    template: `
<div class="right-top">
		    			<h4 class="padding_10">
		    				<img width="30" class="vertical-align_m mg_r10" src="img/index-tittleimg.png"/>
		    				<strong class="blue font_16">Top <span class="color_00">10</span></strong>
		    				<strong class="color_b">Top10</strong>
		    			</h4>
		    			<ul class="mg_top10 ">
		    				<li class="clearfix mg_b10" v-for="(l,item) in list" :key="item" @click="todetail(l.id)" style="cursor: pointer">
		    					<strong :class="{ 
		    					 'red font_16 left mg_top10': item===0,
		    					 'red1 font_16 left mg_top10': item===1,
		    					 'blue font_16 left mg_top10': item===2,
		    					 'color_9 font_16 left mg_top10': item>2,
		    					  }">{{item+1}}</strong>
		    					<div class="left mg_left10">
		    						<h4 class="font_15 t-over">{{l.musicName}}</h4>
		    						<p class="color_9 mg_top5">{{l.className}}</p>
		    					</div>
		    					<span class="right relative select-box  text-center padding_5">
				    				<i class="color_ff">￥{{l.gold}}</i>
				    			</span>
		    				</li>
		    				
		    				<li class="padding_b20"><p class="mg_top10 text-center"><router-link to="/danqu" class="basic_a blue bor_b_blue">更多排行榜 &gt;&gt;</router-link></p></li>
		    			</ul>
	    			</div>`
});

//首页排行榜
Vue.component('ranking-component', {
    data: function () {
        return {
            info: [],
            man: [],
            list: [],
            list1: [],
            list2: [],


        }
    },
    filters: {
        formdata: function (val) {
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d;
        }
    },
    mounted() {
        this.$options.methods.getDance(this)
    },
    methods: {
        changetab: function (type) {
            this.$emit("changetab", type);
        },
        getDance: function (obj) {
            var data = {};
            data.tableName = '';

            axios.post(sysurl + 'findRankingList?tableName=p&showCount=5&currentPage=1&dateType=m&is_web=1&rankType=fixed')
                .then(res => {
                    if (res.data.code === 0) {
                        obj.list = res.data.data[0];
                        obj.list1 = res.data.data[1];
                        obj.list2 = res.data.data[2];

                        // })
                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })
        },
        handelckick: function (e) {

            $(e.target).children('.select-list').fadeIn(100);
            $(e.target).parents(".newuqu-list").siblings().find('.select-list').hide()
            $(e.target).parents("li").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
            $(e.target).parents(".new-list").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix ").siblings().find('.select-list ').hide()
        },
        handelleave: function (e) {
            $(e.target).fadeOut(200)
        },
        zan: function (id) {
            var uid=getCookie('uid');
            if(uid){
                axios.post(sysurl + 'give?videoId=' + id)
                    .then(res => {
                        if (res.data.code === 0) {

                            alert(res.data.message)


                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }else {
                overy_show()
                $(".login-mask").fadeIn()
            }

        },
        todetail: function (l, id) {
            if (l.mediaType == 'video') {
                this.$router.push({path: '/dvplay', query: {id: id}})

            } else if (l.mediaType == 'album') {

            } else {
                // this.$router.push({path: '/musicList', query: {id: id}})
            }

        }


    },

    template: `
<div class="bg_f5 padding_b50">
	    	<div class="width1200">
	    		<h4 class="tittle padding_10 bor_b clearfix padding_t50">
	    			<span class="left">
	    				<img width="30" class="vertical-align_m mg_r10" src="img/index-tittleimg.png">
	    				<strong class="blue font_16">排行 <span class="color_00">榜</span></strong>
	    				<strong class="color_b">ranking list</strong>
	    			</span>
    				<router-link to="/danqu" class="right basic_a blue bor_b_blu">查看更多>>  </router-link>
    			</h4>
    			<div class="clearfix mg_top40">
	    			<div class="ranking-box bg_green" v-if="list!=null">
	    				<div class="text-center">
	    					<h1 class="color_ff"><img src="img/tittle-lr.png"/><strong class="padding_lr10">试听榜</strong><img src="img/tittle-lr.png"/></h1>
		    				<h4 class="color_ff mg_top10 font_18">{{list.rankName}}</h4>
		    				<p class="line"></p>
		    				<p class="mg_top10 text-center"><router-link to="/danqu" class="basic_a blue bor_b_blue">更多排行榜 &gt;&gt;</router-link></p>
	    				</div>
	    				<ul class="mg_top10 ">
		    				<li class="clearfix padding_10" v-for="(l,index) in list.subList" :key="index" @click="todetail(list,l.id)" style="cursor: pointer">
		    					<strong :class="{ 
		    					 'red font_18 left mg_top10': index===0,
		    					 'red1 font_18 left mg_top10': index===1,
		    					 'blue font_18 left mg_top10': index===2,
		    					 'color_9 font_18 left mg_top10': index>2,
		    					  }">{{index+1}}</strong>
		    					<div class="left mg_left20">
		    						<h4 class="font_15 color_ff t-over" v-if="list.mediaType == 'video'">{{l.videoName}}</h4>
		    						<h4 class="font_15 color_ff t-over" v-if="list.mediaType == 'music'">{{l.musicName}}</h4>
		    						<p class="color_ff mg_top5">{{l.className}}</p>
		    					</div>
<!--	    						<span class="relative select-box  text-center padding_5 right" @click.stop="handelckick">-->
<!--                                                <i class="color_ff" >￥{{l.gold}}</i>-->
<!--                                                <i class="absolute select-list" @mouseleave.prevent="handelleave">-->
<!--                                                    <a @click="zan(d.id)"><img src="img/icon-zan.png">点赞</a>-->
<!--                                                            <a @click="download(l)"><img src="img/icon-xz.png">下载</a>-->
<!--                                                            <a @click="sc(l.id)"><img src="img/icon-start.png">收藏</a>-->
<!--                                                            <a @click="pla(l.id)"><img src="img/icon-pl.png">评论</a>-->
<!--                                                            <a href="javascript:;"><img src="img/icon-fk.png">反馈</a>-->
<!--                                                </i>-->
<!--			    			                </span>-->
		    				</li>
		    			 
		    			</ul>
	    			</div>
		    	    <div class="ranking-box bg_yell" v-if="list1!=null">
	    				<div class="text-center">
	    					<h1 class="color_ff"><img src="img/tittle-lr.png"/><strong class="padding_lr10">试听榜</strong><img src="img/tittle-lr.png"/></h1>
		    				<h4 class="color_ff mg_top10 font_18">{{list1.rankName}}</h4>
		    				<p class="line"></p>
		    				<p class="mg_top10 text-center"><router-link to="/danqu" class="basic_a blue bor_b_blue">更多排行榜 &gt;&gt;</router-link></p>
	    				</div>
	    				<ul>
	    					<li class="padding_10" v-for="(l,index) in list1.subList" :key="index" @click="todetail(list1,l.id)" style="cursor: pointer">
	    						<router-link :to="'/taoquDetail?id='+l.id" class="width100">
		    						<strong :class="{ 
		    					 'red font_18 left mg_top10': index===0,
		    					 'red1 font_18 left mg_top10': index===1,
		    					 'blue font_18 left mg_top10': index===2,
		    					 'color_9 font_18 left mg_top10': index>2,
		    					  }">{{index+1}}</strong>
		    						<dl class="clearfix ranking-dl mg_left20 padding_10">
		    							<dt class="left">
		    							<img v-if="list1.mediaType=='album'" :src="l.albumCover"/>
		    							<img v-if="list1.mediaType=='video'" :src="l.cover"/>
		    							</dt>
		    							<dd class="left">
		    								<h4 class="font_15 color_ff"><i class="t-overs">{{l.albumName}}{{l.videoName}}</i><i class="font_14 right mg_top10">{{l.updateTime}}</i></h4>
			    						    <p class="color_ff  text">{{l.secClassName}}</p>
		    							</dd>
		    						</dl>
	    						</router-link>
	    					</li>
	    	
	    				</ul>
	    			</div>
	    			<div class="ranking-box bg_blue" v-if="list2!=null">
	    				<div class="text-center">
	    					<h1 class="color_ff"><img src="img/tittle-lr.png"/><strong class="padding_lr10">试听榜</strong><img src="img/tittle-lr.png"/></h1>
		    				<h4 class="color_ff mg_top10 font_18">{{list2.rankName}}</h4>
		    				<p class="line"></p>
		    				<p class="mg_top10 text-center"><router-link to="/danqu" class="basic_a blue bor_b_blue">更多排行榜 &gt;&gt;</router-link></p>
	    				</div>
	    				<ul class="mg_top10 ">
		    				<li class="padding_10" v-for="(l,index) in list2.subList" :key="index" @click="todetail(list2,l.id)" style="cursor: pointer">
	    						<a href="javascript:;" class="width100">
		    							<strong :class="{ 
		    					 'red font_18 left mg_top10': index===0,
		    					 'red1 font_18 left mg_top10': index===1,
		    					 'blue font_18 left mg_top10': index===2,
		    					 'color_9 font_18 left mg_top10': index>2,
		    					  }">{{index+1}}</strong>
		    						<dl class="clearfix ranking-dl mg_left20 padding_10">
		    							<dt class="left relative">
		    								<img :src="l.cover"/>
<!--		    								<img class="absolute bofang" src="img/bf-img.png"/>-->
		    							</dt>
		    							<dd class="left">
		    								<h4 class="font_15 color_ff"><i class="t-overs">{{l.musicName}}</i> <i class="font_14 right mg_top10">{{l.updateTime}}</i></h4>
			    						    <p class="color_ff  text">{{l.className}}</p>
		    							</dd>
		    						</dl>
	    						</a>
	    					</li>
	    				
	    				</ul>
	    			</div>
	    		</div>
	    	</div>
	    </div>`
});

//首页音乐人
Vue.component('musicperson-component', {
    data: function () {
        return {
            info: [],
            man: [],
            list: [],
            muId: 0,
            scm: false,
            scma: false,
            zjId: 0,
            songlist: '',
            fk:'',
            today:''

        }
    },
    filters: {
        formdata: function (val) {
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d;
        },
        formdatas: function (val) {
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y.toString().substr(2, 2) + '-' + MM + '-' + d;
        }
    },
    props: ["homelist"],
    watch: {
        "homelist": function () {
            this.$options.methods.getDance(this, this.homelist)
        }
    },
    mounted() {
        this.$options.methods.getDance(this, this.homelist)
        let date = new Date();
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        this.today = y.toString() + '-' + MM + '-' + d
    },
    methods: {

        getDance: function (obj, val) {

            for (list in val) {
                if (val[list].classCode == 3) {
                    obj.songlist = val[list]
                    axios.post(sysurl + 'findClassIdGetAlbumLis?secClassId=' + obj.songlist.id+'&showCount=16&currentPage=1')
                        .then(res => {
                            if (res.data.code === 0) {
                                obj.man = res.data.data.list;


                                var swiper = new Swiper('.cb .swiper-container', {
                                    slidesPerView: 1,
                                    slidesPerColumn: 1,
                                    spaceBetween: 30,
                                    paginationClickable: true,
                                    observer: true,//修改swiper自己或子元素时，自动初始化swiper
                                    // observeParents:true,
                                    pagination: {
                                        el: '.cb .swiper-pagination',
                                        clickable: true,

                                    },
                                })
                                // })
                            } else {

                            }
                        }, err => {

                        })
                        .catch((error) => {

                        })

                    // axios.post(sysurl + 'findIdGetMusicList?classId=' + obj.songlist.id)
                    //     .then(res => {
                    //         if (res.data.code === 0) {
                    //             obj.list = res.data.data.list;
                    //             var swiper = new Swiper('.cc .swiper-container', {
                    //                 // loop:true,
                    //                 paginationClickable: true,
                    //                 observer: true,//修改swiper自己或子元素时，自动初始化swiper
                    //                 // observeParents:true,
                    //                 pagination: {
                    //                     el: '.swiper-pagination',
                    //                     clickable: true,
                    //
                    //                 },
                    //             })
                    //             // })
                    //         } else {
                    //
                    //         }
                    //     }, err => {
                    //
                    //     })
                    //     .catch((error) => {
                    //
                    //     })


                }

            }


        },
        handelckick: function (e) {

            $(e.target).children('.select-list').fadeIn(100);
            $(e.target).parents(".newuqu-list").siblings().find('.select-list').hide()
            $(e.target).parents("li").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
            $(e.target).parents(".new-list").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix ").siblings().find('.select-list ').hide()
        },
        handelleave: function (e) {
            $(e.target).fadeOut(200)
        },
        zan: function (id) {
            var uid = getCookie('uid');
            if(uid){
                axios.post(sysurl + 'isZan?musicId=' + id + '&uid=' + uid)
                    .then(res => {
                        if (res.data.code === 0) {
                            if (res.data.data.isZan === 0) {
                                axios.post(sysurl + 'giveZan?musicId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            } else {
                                axios.post(sysurl + 'cancelZan?musicId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            }
                            // layer.msg(res.data.message)


                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }else {
                overy_show()
                $(".login-mask").fadeIn()
            }

        },
        sc(id) {
            this.scm = true
            this.muId = id;

        },
        out() {
            this.scm = false
            this.scma = false
            $('.login-mask').fadeOut();
        },
        pla(id,t) {
            this.fk = t
            this.scma = true;
            this.zjId = id;

        },
        showMessageFromChild(data) {
            this.scm = data;
            this.scma = data;
        },
        download: function (id, type) {
            overy_show()
            $(".down-mask").fadeIn()
            this.$emit("showdownload", id, type)
        },
        playMusic: function (id) {
            this.$emit("playMusic", id, event.target)
        },
        todetail: function (id) {
            // this.$router.push({path: '/musicList', query: {id: id}})
        }

    },

    template: `<div class="indexbox mg_top20">
    <musicsc :muid="muId"  :video="0" v-on:muscm="showMessageFromChild" v-if="scm == true"></musicsc>
     <musicpl :zjid="zjId" :type="2" :fk="fk" v-on:muscm="showMessageFromChild" v-if="scma == true"></musicpl>
    <div class="overlay" v-if="scm == true || scma == true" @click="out" style="display: block"></div>
	    				<h4 class="tittle padding_10 bor_b clearfix">
	    					<p class="left">
	    						<img width="30" height="30" style="object-fit: cover;border-radius: 50%" class="vertical-align_m mg_r10" :src="songlist.cover"/>
			    				<strong class="blue font_16">{{songlist.className}}<span class="color_00"></span></strong>
<!--			    				<strong class="color_b">djs</strong>-->
	    					</p>
		    				<router-link :to="'/musicManList?secClassId='+songlist.id"  class="right basic_a blue bor_b_blue">查看更多&gt;&gt;  </router-link>
		    			</h4>
		    			<div class="new-wuqu mg_top10  cb" id="music-man">
		    				<div class="swiper-container" style="padding-bottom: 30px">
		    					<div class="swiper-wrapper music-man-list">
		    						<div class="swiper-slide" v-for="(tt,index) in man" :key="index" v-if="index<4&&index<man.length/4">
		    							<dl style="box-shadow: 0 0 5px 2px rgba(0,0,0,.3);float: left;" class="music-list" v-for="(m,item) in man" :key="item" v-if="item<index*4+4&&item>=index*4">
		    								<router-link :to="'/taoquDetail?id='+m.id" class="width100">
			    								<dt class="relative">
<!--			    								<span class="needpay" v-if="m.is_pay == 1">付费</span>-->
<!--    				                            <span class="needpay" v-if="m.is_pay == 2">VIP下载</span>-->
			    								<img :src="m.cover"/><p class="absolute muisc-nums">歌曲数量: <span class="blue">{{m.musicCount}}</span></p></dt>
			    								<dd class="padding_10 bg_ff">
			    									<h4 class="font_16 text">{{m.name}}</h4>
			    									<p :class="{'red':m.last_edit_time==today,'':m.last_edit_time!=today}">最后更新：{{m.last_edit_time}}</p>
			    								</dd>
		    								</router-link>
		    							</dl>
		    						</div>
		    						
		   
		    						
		    					</div>
		    					<div class="swiper-pagination"></div>
		    				</div>
<!--		    			     <div class="music-box mg_top40">-->
<!--		    			    	<div class="clearfix bg_b">-->
<!--					    			<p class="left">-->
<!--						    			<span style="margin-left: 105px;">歌名</span>-->
<!--					    		    </p>-->
<!--					    		    <p class="right">-->
<!--					    		    	<span>更新日期</span>-->
<!--					    		    	<span>分类</span>-->
<!--						    			<span>音调 </span>-->
<!--						    			<span style="margin-right: 114px;">BPM</span>-->
<!--					    		    </p>-->
<!--					    		</div>-->
<!--		    			    	<div class="clearfix newuqu-list" v-for="(l,item) in list" @click="todetail(l.id)">-->
<!--					    			<p class="left">-->
<!--						    			<span><img width="30" height="30" class="bor_r5 vertical-align_m" :src="l.cover"></span>-->
<!--						    			<span class="icon-videobtn"><img :id="songlist.id+'-'+l.id" class="vertical-align_m" src="img/icon-zt.png" @click.stop="playMusic(l.id)"/></span>-->
<!--						    			<span class="song-name text">{{l.musicName}}</span>-->
<!--						    		</p>-->
<!--						    		<div class="right">-->
<!--						    			<span>{{l.updateTime|formdatas}}</span>-->
<!--						    			<span>{{l.className}}</span>-->
<!--						    			<span>{{l.speed}}</span>-->
<!--						    			<span>{{l.tone}}</span>-->
<!--						    			<span class="relative select-box  text-center padding_5" @click.stop="handelckick">-->
<!--			    				<i class="color_ff" >￥{{l.gold}}</i>-->
<!--			    				<i class="absolute select-list" @mouseleave.prevent="handelleave">-->
<!--			    				<a @click="zan(l.id)"><img src="img/icon-zan.png">点赞</a>-->
<!--                                <a @click="download(l.id,1)"><img src="img/icon-xz.png">下载</a>-->
<!--                                <a @click="sc(l.id)"><img src="img/icon-start.png">收藏</a>-->
<!--                                <a @click="pla(l.id)"><img src="img/icon-pl.png">评论</a>-->
<!--                                <a @click="pla(l.id,1)"><img src="img/icon-fk.png">反馈</a>-->
<!--			    				</i>-->
<!--			    			</span>-->
<!--						    		</div>-->
<!--					    		</div>-->
<!--					    	-->
<!--		    			    </div>-->
		    			</div>
	    			</div>`
});


//日期控件
var setTime = Vue.component('setTime', {
    props: ['time'],
    data: function () {
        return {

            yearsModel: null,
            years: [],
            monthsModel: null,
            months: [],
            daysModel: null,
            days: [],

        }
    },
    created() {
        this.init();
    },
    mounted() {

        // user/updateAppUser

    },
    methods: {
        init() {
            var myDate = new Date;
            if (this.time == '') {
                var year = myDate.getFullYear();//获取当前年
                var month = myDate.getMonth() + 1;//获取当前月
                var day = myDate.getDate();//获取当前日
            } else {
                var time = this.time.split('-');
                var year = parseInt(time[0]);//获取当前年
                var month = parseInt(time[1]);//获取当前月
                var day = parseInt(time[2]);//获取当前日
            }


            this.initSelectYear(year)
            this.initSelectMonth();
            this.initSelectDay(year, month);
            this.yearsModel = year;
            this.monthsModel = month;
            this.daysModel = day;
            let obj = {year: this.yearsModel, month: this.monthsModel, day: this.daysModel}
            this.$parent.dateChange(obj);
        },
        initSelectYear(year) {
            this.years = [];
            for (let i = 0; i < 30; i++) {
                this.years.push({value: (year - i), label: (year - i) + "年"});
            }
        },
        initSelectMonth() {
            this.months = [];
            this.months.push({value: 0, label: "全部"});
            for (let i = 1; i <= 12; i++) {
                this.months.push({value: i, label: i + "月"});
            }
        },
        initSelectDay(year, month) {
            var maxDay = this.getMaxDay(year, month);
            this.days = [];
            this.days.push({value: 0, label: "全部"});
            for (var i = 1; i <= maxDay; i++) {
                this.days.push({value: i, label: i + "日"});
            }
        },
        dateChange(type) {
            //1年 2月 3日 4 左 5右
            if (type == 1 || type == 2) {
                if (this.monthsModel == 0) {
                    this.daysModel = 0;
                    this.initSelectDay(this.yearsModel, 1);
                } else {
                    this.initSelectDay(this.yearsModel, this.monthsModel);
                }
            }
            if (type == 4) {
                this.dayleft();
            }
            if (type == 5) {
                this.dayright();
            }

            //操作父组件方法
            let obj = {year: this.yearsModel, month: this.monthsModel, day: this.daysModel}
            this.$parent.dateChange(obj);

        },
        dayleft() {

            var tmpYear = this.yearsModel;
            var tmpMonth = this.monthsModel;
            var tmpDay = this.daysModel;
            if (tmpYear == null) {
                var myDate = new Date;
                var year = myDate.getFullYear();//获取当前年
                var month = myDate.getMonth() + 1;//获取当前月
                var day = myDate.getDate();//获取当前日
                this.yearsModel = year;
                this.monthsModel = month;
                this.daysModel = day;
                return;
            }
            if (tmpMonth == null) {
                tmpMonth = 0
            }
            if (tmpDay == null) {
                tmpDay = 0
            }

            var yearV = tmpYear;
            var monthV = tmpMonth;
            var dayV = tmpDay;

            if ((tmpMonth == 0 || tmpMonth == 1) && (tmpDay == 0 || tmpDay == 1)) {
                yearV = tmpYear - 1;
                monthV = 12;
                dayV = this.getMaxDay(tmpYear, tmpMonth);
            }
            if (!(tmpMonth == 0 || tmpMonth == 1) && (tmpDay == 0 || tmpDay == 1)) {
                monthV = tmpMonth - 1;
                dayV = this.getMaxDay(tmpYear, tmpMonth);
            }
            if ((tmpMonth == 0 || tmpMonth == 1) && !(tmpDay == 0 || tmpDay == 1)) {
                dayV = tmpDay - 1;
            }
            if (!(tmpMonth == 0 || tmpMonth == 1) && !(tmpDay == 0 || tmpDay == 1)) {
                dayV = tmpDay - 1;
            }
            this.yearsModel = yearV;
            this.monthsModel = monthV;
            this.daysModel = dayV;
        },
        dayright() {

            var myDate = new Date;
            var year = myDate.getFullYear();//获取当前年
            var month = myDate.getMonth() + 1;//获取当前月
            var day = myDate.getDate();//获取当前日

            var tmpYear = this.yearsModel;
            var tmpMonth = this.monthsModel;
            var tmpDay = this.daysModel;

            if (tmpYear == null) {
                var myDate = new Date;
                var year = myDate.getFullYear();//获取当前年
                var month = myDate.getMonth() + 1;//获取当前月
                var day = myDate.getDate();//获取当前日
                this.yearsModel = year;
                this.monthsModel = month;
                this.daysModel = day;
                return;
            }

            if (tmpMonth == null) {
                tmpMonth = 0
            }
            if (tmpDay == null) {
                tmpDay = 0
            }
            if (tmpYear > year) {
                this.yearsModel = year;
                this.monthsModel = month;
                this.daysModel = day;
                return;
            }
            if (tmpYear == year) {
                if ((tmpMonth > month || tmpMonth == 0) || (tmpMonth == month) && (tmpDay >= day || tmpDay == 0)) {
                    this.yearsModel = year;
                    this.monthsModel = month;
                    this.daysModel = day;
                    return;
                }
            }

            var maxDay = this.getMaxDay(tmpYear, tmpMonth);
            var yearV = tmpYear;
            var monthV = tmpMonth;
            var dayV = tmpDay;

            if ((tmpMonth == 0 || tmpMonth == 12) && (tmpDay == 0 || tmpDay == maxDay)) {
                yearV = tmpYear + 1;
                monthV = 1;
                dayV = 1;
            }
            if (!(tmpMonth == 0 || tmpMonth == 12) && (tmpDay == 0 || tmpDay == maxDay)) {
                monthV = tmpMonth + 1;
                dayV = 1;
            }
            if (!(tmpMonth == 0 || tmpMonth == 12) && !(tmpDay == 0 || tmpDay == maxDay)) {
                dayV = tmpDay + 1;
            }

            this.yearsModel = yearV;
            this.monthsModel = monthV;
            this.daysModel = dayV;

        },
        getMaxDay(year, month) {
            var new_year = year;  //取当前的年份
            var new_month = month++;//取下一个月的第一天，方便计算（最后一天不固定）
            if (month > 12)      //如果当前大于12月，则年份转到下一年
            {
                new_month -= 12;    //月份减
                new_year++;      //年份增
            }
            var new_date = new Date(new_year, new_month, 1);//取当年当月中的第一天
            return (new Date(new_date.getTime() - 1000 * 60 * 60 * 24)).getDate();//获取当月最后一天日期
        }
    },
    template: `	
    				<div class="mg_top10 order-inp">
    					<span>生日：</span>
   
  
      
       
     
 

    					<span>
    						   <select v-model="yearsModel" @change="dateChange(1)" placeholder="请选择" style="width:100px;">
        <option
          v-for="item in years"
          :key="item.value"
          :label="item.label"
          :value="item.value">{{item.value}}
        </option>
      </select>
    						年
    					</span>
    					<span>
    						  <select v-model="monthsModel" @change="dateChange(2)" placeholder="请选择" style="width:100px;">
        <option
          v-for="item in months"
          :key="item.value"
          :label="item.label"
          :value="item.value">{{item.value}}
        </option>
      </select>
    						月
    					</span>
    					<span>
    						 <select v-model="daysModel" @change="dateChange(3)" placeholder="请选择" style="width:100px;">
        <option
          v-for="item in days"
          :key="item.value"
          :label="item.label"
          :value="item.value">{{item.value}}
        </option>
      </select>日
    					</span>
    				</div>
    		`
});
//地区控件
var arrs = Vue.component('arrs', {
    model: {
        prop: 'caddress',
        event: 'change',
    },
    props: {
        caddress: {
            type: Object,
        },
    },
    data() {
        return {
            areaJson: 'js/address.json',
            addressArray: [],//所有数据
            cityArray: [],
            areaArray: [],
        }
    },
    created() {
        this.getAddressData();
    },
    methods: {
        getAddressData() {
            var that = this

            axios.get(that.areaJson).then(function (response) {

                if (response.status === 200) {
                    //获取地址
                    that.addressArray = response.data.data;
                    //默认值赋值获取城市数组
                    if (that.caddress.sheng) {
                        for (let ad of that.addressArray) {
                            if (ad.areaname === that.caddress.sheng) {
                                that.cityArray = ad.subarea;
                                //---
                                //默认赋值获取区域数组
                                if (that.caddress.shi) {
                                    for (let area of that.cityArray) {
                                        if (area.areaname === that.caddress.shi) {
                                            that.areaArray = area.subarea;
                                            break;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            })
        },
        //选择省份
        getCityData(val) {
            //清空市，和区
            this.caddress.shi = '';
            this.caddress.qu = '';
            this.$emit('change', this.caddress);//发送改变
            for (let ad of this.addressArray) {
                // console.log("AAA",ad.areaname);
                if (ad.areaname === $(val.target).val()) {
                    this.cityArray = ad.subarea;
                    return
                }
            }
        },
        getAreaData(val) {
            //清空区
            this.caddress.qu = '';
            this.$emit('change', this.caddress);//发送改变
            for (let area of this.cityArray) {
                if (area.areaname === $(val.target).val()) {
                    this.areaArray = area.subarea;
                    return
                }
            }
        },
        //地区数据变动后
        onAreaChanged(val) {
            console.log("CCC", this.caddress);
            this.$emit('change', this.caddress);//发送改变
        }
    },
    template: `	
    				<div class="mg_top10 order-inp">
    				
   
    
  
    					<span>地址：</span>
    					<span>
    						<select  v-model="caddress.sheng" style="flex: 1;" placeholder="请选择省份" size="small" @change="getCityData">
      <option
        v-for="item in addressArray"
        :key="item.areacode"
        :label="item.areaname"
        :value="item.areaname"
      >{{item.areaname}}
      </option>
       </select>
    					</span>
    					<span>
    						<select  v-model="caddress.shi" style="flex: 1;margin-left: 10px" placeholder="请选择市区" size="small"
               @change="getAreaData">
      <option
        v-for="item in cityArray"
        :key="item.areacode"
        :label="item.areaname"
        :value="item.areaname">{{item.areaname}}
      </option>
    </select>
    					</span>
    					<span>
    						 <select  v-model="caddress.qu" style="flex: 1;margin-left: 10px" placeholder="请选择区" size="small"
               @change="onAreaChanged">
      <option
        v-for="item in areaArray"
        :key="item.areacode"
        :label="item.areaname"
        :value="item.areaname">{{item.areaname}}
      </option>
    </select>
    					</span>
    				</div>
    		`
});


//首页套曲
Vue.component('homeTaoqu-component', {
    data: function () {
        return {
            info: [],
            man: [],
            list: [],
            songlist: '',
            today:''


        }
    },
    filters: {
        formdata: function (val) {
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d;
        }
    },
    props: ["homelist"],
    watch: {
        "homelist": function () {
            this.$options.methods.getDance(this, this.homelist)

        }
    },
    mounted() {
        this.$options.methods.getDance(this, this.homelist)
        let date = new Date();
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        this.today = y.toString() + '-' + MM + '-' + d
    },
    methods: {

        getDance: function (obj, val) {
            for (list in val) {
                if (val[list].classCode == 5) {
                    obj.songlist = val[list]
                    axios.post(sysurl + 'findClassIdGetAlbumLis?secClassId=' + obj.songlist.id+'&showCount=16&currentPage=1')
                        .then(res => {
                            if (res.data.code === 0) {
                                obj.man = res.data.data.list;
                                var swiper = new Swiper('.ca .swiper-container', {
                                    slidesPerView: 1,
                                    slidesPerColumn: 1,
                                    spaceBetween: 30,
                                    paginationClickable: true,
                                    observer: true,//修改swiper自己或子元素时，自动初始化swiper
                                    // observeParents:true,
                                    pagination: {
                                        el: '.ca .swiper-pagination',
                                        clickable: true,

                                    },
                                })
                                // })
                            } else {

                            }
                        }, err => {

                        })
                        .catch((error) => {

                        })
                }
            }


        }


    },

    template: `
<div class="bg_ff">
    		<div class="width1200">
    			<h4 class="tittle padding_10 bor_b clearfix padding_t50">
	    			<span class="left">
	    				<img width="30" height="30" style="object-fit: cover;border-radius: 50%" class="vertical-align_m mg_r10" :src="songlist.cover"/>
	    				<strong class="blue font_16">{{songlist.className}}<span class="color_00"></span></strong>
	    				<strong class="color_b">Suites</strong>
	    			</span>
    				<router-link :to="'/taoqu?classId='+songlist.id" class="right basic_a blue bor_b_blu">查看更多&gt;&gt;  </router-link>
    			</h4>
    			<div class="new-wuqu ca" id="taoqu1">
    				<div class="swiper-container" style="padding-bottom: 30px">
					    <div class="swiper-wrapper">
					    	<div class="swiper-slide mg_b20" v-for="(tt,index) in man" :key="index" v-if="index<4&&index<man.length/4">
					    		<dl style="box-shadow: 0 0 5px 2px rgba(0,0,0,.3);" class="music-list" v-for="(m,item) in man" :key="item" v-if="item<index*4+4&&item>=index*4">
    								<router-link :to="'taoquDetail?id='+m.id" class="width100">
	    								<dt class="relative">
	    								<span class="needpay" v-if="m.is_pay == 1">付费</span>
    				                            <span class="needpay" v-if="m.is_pay == 2">VIP下载</span>
	    								<img :src="m.cover"><p class="absolute muisc-nums">歌曲数量: <span class="blue">{{m.musicCount}}</span></p></dt>
	    								<dd class="padding_10 bg_ff">
	    									<h4 class="font_16 text">{{m.name}}</h4>
	    									<p class="clearfix mg_top10">

	    										<span class="left" :class="{'red':m.last_edit_time==today,'':m.last_edit_time!=today}">最后更新：{{m.last_edit_time|formdata}}</span>
	    										<span class="right">{{m.typeName}}</span>
	    									</p>
	    								</dd>
    								</router-link>
    							</dl>
<!--    							<dl style="box-shadow: 0 0 5px 2px rgba(0,0,0,.3);" class="music-list" v-for="m in man">-->
<!--    								<a href="index-taoqu-detial.html"class="width100">-->
<!--	    								<dt class="relative"><img :src="m.cover"><p class="absolute muisc-nums">歌曲数量: <span class="blue">{{m.musicCount}}</span></p></dt>-->
<!--	    								<dd class="padding_10 bg_ff">-->
<!--	    									<h4 class="font_16 text">{{m.name}}</h4>-->
<!--	    									<p class="clearfix mg_top10">-->
<!--	    										<span class="left">{{m.created|formdata}}</span>-->
<!--	    										<span class="right">{{m.typeName}}</span>-->

<!--	    									</p>-->
<!--	    								</dd>-->
<!--    								</a>-->
<!--    							</dl>-->
    							
					    	</div>

					    </div>
				    <!-- Add Pagination -->
				        <div class="swiper-pagination"></div>
				  </div>
    			</div>
    		</div>
    	</div>`
});
//首页DVJ
Vue.component('homeDv-component', {
    data: function () {
        return {
            info: [],
            man: [],
            list: [],
            songlist: [],
            scm: false,
            scma: false,
            zjId: 0,
            fk:''


        }
    },
    filters: {
        formdata: function (val) {
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d;
        }
    },
    props: ["homelist"],
    watch: {
        "homelist": function () {
            this.$options.methods.getDance(this, this.homelist)

        }
    },
    mounted() {
        this.$options.methods.getDance(this, this.homelist)
    },
    methods: {

        getDance: function (obj, val) {
            for (list in val) {
                if (val[list].classCode == 2) {
                    obj.songlist = val[list]
                    axios.post(sysurl + 'findVideoIdByList?secClassId=' + obj.songlist.id)
                        .then(res => {
                            if (res.data.code === 0) {
                                obj.list = res.data.data.list;
                                var swiper = new Swiper('.cp .swiper-container', {
                                    slidesPerView: 1,
                                    slidesPerColumn: 2,
                                    spaceBetween: 30,
                                    paginationClickable: true,
                                    observer: true,//修改swiper自己或子元素时，自动初始化swiper
                                    // observeParents:true,
                                    pagination: {
                                        el: '.cp .swiper-pagination',
                                        clickable: true,

                                    },
                                })
                                // })
                            } else {

                            }
                        }, err => {

                        })
                        .catch((error) => {

                        })
                }
            }

        },
        handelckick: function (e) {

            $(e.target).children('.select-list').fadeIn(100);
            $(e.target).parents(".newuqu-list").siblings().find('.select-list').hide()
            $(e.target).parents("li").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
            $(e.target).parents(".new-list").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix ").siblings().find('.select-list ').hide()
        },
        handelleave: function (e) {
            $(e.target).fadeOut(200)
        },
        zan: function (id) {
            var uid = getCookie('uid');
            if(uid){
                axios.post(sysurl + 'isZan?videoId=' + id + '&uid=' + uid)
                    .then(res => {
                        if (res.data.code === 0) {
                            if (res.data.data.isZan === 0) {
                                axios.post(sysurl + 'giveZan?videoId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            } else {
                                axios.post(sysurl + 'cancelZan?videoId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            }
                            // layer.msg(res.data.message)


                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }else {
                overy_show()
                $(".login-mask").fadeIn()
            }

        },
        sc(id) {
            this.scm = true
            this.muId = id;

        },
        out() {
            this.scm = false
            this.scma = false
            $('.login-mask').fadeOut();
        },
        pla(id,t) {

            this.fk = t
            this.scma = true;
            this.zjId = id;

        },
        showMessageFromChild(data) {
            this.scm = data;
            this.scma = data;
        },
        download: function (id, type) {
            overy_show()
            $(".down-mask").fadeIn()
            this.$emit("showdownload", id, type)
        },


    },

    template: `
<div>
 <musicsc :muid="muId"  :video="1" v-on:muscm="showMessageFromChild" v-if="scm == true"></musicsc>
     <musicpl :zjid="zjId" :type="1" :fk="fk" v-on:muscm="showMessageFromChild" v-if="scma == true"></musicpl>
    <div class="overlay" v-if="scm == true || scma == true" @click="out" style="display: block"></div>
<div class="bg_ff">
    		<div class="width1200">
    			<h4 class="tittle padding_10 bor_b clearfix padding_t50">
	    			<span class="left">
	    				<img width="30" height="30" style="object-fit: cover;border-radius: 50%" class="vertical-align_m mg_r10" :src="songlist.cover"/>
	    				<strong class="blue font_16">{{songlist.className}}<span class="color_00"></span></strong>
	    				<strong class="color_b">dvj</strong>
	    			</span>
    				<router-link :to="'/dv?classId='+songlist.id" class="right basic_a blue bor_b_blu">查看更多&gt;&gt;  </router-link>
    			</h4>
    			<div class="new-wuqu dv-box cp" id="taoqu">
    				<div class="swiper-container" style="padding-bottom: 30px">
					    <div class="swiper-wrapper">
					    	<div class="swiper-slide">
					    		<dl style="box-shadow: 0 0 5px 2px rgba(0,0,0,.3);" class="music-list" v-for="(l,item) in list" :key="item" v-if="item<8">
								    <router-link :to="'/dvplay?id='+l.id"  class="width100 absolute video-bof"><img src="img/taoqi-video.png" alt=""></router-link>
									<dt class="relative">
									<span class="needpay" v-if="l.need_pay == 1">付费</span>
										<img :src="l.cover">
								     	<div class="absolute muisc-nums">
								     		<p class="absolute muisc-nums text_right"><img src="img/bof-nums.png"/> {{l.plays}}</p>
								     		
							    			<span class="relative select-box  text-center padding_5 left" @click.stop="handelckick">
                                                <i class="color_ff" >￥{{l.gold}}</i>
                                                <i class="absolute select-list" @mouseleave.prevent="handelleave">
                                                  	<a @click="zan(l.id)"><img src="img/icon-zan.png">点赞</a>
                                                    <a @click="download(l.id,2)"><img src="img/icon-xz.png">下载</a>
                                                    <a @click="sc(l.id)"><img src="img/icon-start.png">收藏</a>
                                                    <a @click="pla(l.id)"><img src="img/icon-pl.png">评论</a>
                                                    <a @click="pla(l.id,1)"><img src="img/icon-fk.png">反馈</a>
                                                </i>
			    			                </span>
								     	</div>
									</dt>
									<dd class="padding_10 bg_ff">
										<h4 class="font_16 text "> {{l.videoName}}</h4>
										<p class="clearfix mg_top10">
											<span class="left">{{l.created|formdata}}</span>
											<span class="right">{{l.className}}</span>
										</p>
									</dd>
								</dl>
					    	</div>
					   
					    </div>
				    <!-- Add Pagination -->
				        <div class="swiper-pagination"></div>
				  </div>
    			</div>
    		</div>
    	</div>
    	</div>`
});

//首页热卖商品
Vue.component('homeOder', {
    data: function () {
        return {
            device: []


        }
    },
    mounted() {
        axios.post(sysurl2 + 'goods/main').then(res => {
            if (res.data.code === 0) {
                this.device = res.data.device;
            }
        })
    },
    methods: {},

    template: `<div class="bg_f5 mg_b20">
    		<div class="clearfix width1200 mg_top40">
    			<h4 class="tittle padding_10 bor_b clearfix padding_t50">
    				<p class="left">
    					<img width="30" class="vertical-align_m mg_r10" src="img/index-tittleimg.png">
	    				<strong class="blue font_16">热卖 <span class="color_00">商品</span></strong>
	    				<strong class="color_b">Hot selling goods</strong>
    				</p>
    				<router-link to="/Component" class="right basic_a blue bor_b_blu">查看更多>>  </router-link>
    			</h4>
    			<div class="mg_top40 hot-box clearfix">
    				<dl v-for="l in device" class="bg_ff">
    					<router-link :to="'/GoodsComponent?id='+l.id"  >
			    			<dt><img :src="l.coverUrl"/></dt>
			    			<dd class="padding_10">
			    				<p class="text_over">{{l.goodName}}</p>
			    				<h4 class="clearfix font_16 mg_top10">
<!--			    					<strong class="left red">￥{{l.price}}</strong>-->
			    					
			    					 <p v-if="l.IS_PREFERENTIAL == 1">
			    					价格：<s style="font-size: 12px;margin-right: 10px">￥{{l.price}}</s><strong class="red">￥{{l.price-l.PREFERENTIAL}}</strong>
			    					<span class="right vertical-align_m"><img src="img/icon-card.png"/></span>
                                    <i style="font-size: 14px;display: block;margin-top: 8px">销量：{{l.sales}}</i>
                                    </p>
                                    <p v-if="l.IS_PREFERENTIAL != 1">
			    					价格：<strong class="red">￥{{l.price}}</strong>
			    					<span class="right vertical-align_m"><img src="img/icon-card.png"/></span>
			    				 <i style="font-size: 14px;display: block;margin-top: 8px">销量：{{l.sales}}</i>
                                    </p>
			    				</h4>
			    			</dd>
		    			</router-link>
		    		</dl>
    			</div>
	    	</div>
    	</div>`
});

//排行榜
var danqu = Vue.component('more-component', {
    data: function () {
        return {
            count: 0,
            tableName: "p",
            showCount: 15,
            dateType: "y",
            rankType: 'fixed',
            is_web: 1,
            list: [],
            toplist: [],
            topid: '',
            mediaType: '',
            rankType: '',
            activeDefault: 0,
            listenDetalt: 0,
            musicchecksta: false,
            videochecksta: false,
            scm: false,
            scma: false,
            zjId: 0,
            video: 0,
            type: 2,
            downloadtype: '',
            all:true,
            fk:'',
            songId:'',
            thispage:'0'
        }
    },
    filters: {
        formdata: function (val) {
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d;
        }
    },
    mounted() {
        // $(function () {
        //     $("#ranking").createPage({
        //         pageCount: 30,
        //         current: 1,
        //         backFn: function (p) {
        //             //console.log(p);
        //         }
        //     });
        // })


        this.$options.methods.getDance(this)


    },
    methods: {
        getDance: function (obj) {
            var formdata = new FormData();
            formdata.append("tableName", obj.tableName)
            formdata.append("showCount", obj.showCount)
            formdata.append("dateType", obj.dateType)
            // formdata.append("rankType",obj.rankType)
            // formdata.append("is_web",obj.is_web)

            // axios.post(sysurl + "findRankingList?tableName="+obj.tableName+"&dateType="+obj.dateType+"&rankType="+obj.rankType)
            axios.post(sysurl + "findRankingList", formdata)
                .then(res => {
                    if (res.data.code === 0) {
                        obj.list = res.data.data;
                        obj.topid = res.data.data[0].id
                        obj.mediaType = res.data.data[0].mediaType
                        obj.rankType = res.data.data[0].rankType
                        obj.$options.methods.getlist(obj, 1)


                        // })
                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })


        },
        getlist: function (obj, currentPage) {
            var formdata = new FormData();
            formdata.append("tableName", obj.tableName)
            formdata.append("showCount", obj.showCount)
            formdata.append("dateType", obj.dateType)
            formdata.append("currentPage", currentPage)
            formdata.append("id", obj.topid)

            var url = ''
            if (obj.rankType == 'fixed') {
                if (obj.mediaType == 'album') {
                    url = "getAlbumRankingList"
                } else {
                    url = "findRankingMusicVideoList"
                    if (obj.mediaType == 'music') {
                        obj.type = 2
                        obj.video = 0
                    } else {
                        obj.type = 1
                        obj.video = 1
                    }
                }
            } else {
                url = "findRankingMusicVideoList"
                obj.type = 2
                obj.video = 0
            }


            // axios.post(sysurl + "findRankingList?tableName="+obj.tableName+"&dateType="+obj.dateType+"&rankType="+obj.rankType)
            axios.post(sysurl + url, formdata)
                .then(res => {
                    if (res.data.code === 0) {
                        obj.toplist = res.data.data.list;
                        $("#ranking").createPage({
                            pageCount: res.data.data.totalPage,
                            current: res.data.data.currentPage,
                            backFn: function (p) {
                                obj.$options.methods.getlist(obj, p)
                                obj.thispage = p-1
                            }
                        });
                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })


        },
        changeactive: function (l, item) {

            this.topid = l.id
            this.mediaType = l.mediaType
            this.rankType = l.rankType
            this.activeDefault = item
            this.thispage = 0
            this.$options.methods.getlist(this, 1)
        },
        changeListen: function (type, str) {
            this.activeDefault = 0
            this.listenDetalt = type
            this.tableName = str
            this.thispage = 0
            this.$options.methods.getDance(this, 1)

        },

        todetail: function (type, id) {
            if (type == 1) {
                this.$router.push({path: '/dvplay', query: {id: id}})

            } else if (type == 2) {
                this.$router.push({path: '/taoquDetail', query: {id: id}})
            } else {
                // this.$router.push({path: '/musicList', query: {id: id}})

            }

        },
        musicchangestatus: function () {
            this.musicchecksta = !this.musicchecksta
        },
        videochangestatus: function () {
            this.videochecksta = !this.videochecksta
        },
        handelckick: function (e) {

            $(e.target).children('.select-list').fadeIn(100);
            $(e.target).parents(".newuqu-list").siblings().find('.select-list').hide()
            $(e.target).parents("li").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
            $(e.target).parents(".new-list").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix ").siblings().find('.select-list ').hide()
        },
        handelleave: function (e) {
            $(e.target).fadeOut(200)
        },
        zan: function (type, id) {
            var uid = getCookie('uid');
            if(uid){
                var idname = ''
                if (type == 1) {
                    idname = "musicId"
                } else {
                    idname = "videoId"
                }
                axios.post(sysurl + 'isZan?' + idname + '=' + id + '&uid=' + uid)
                    .then(res => {
                        if (res.data.code === 0) {
                            if (res.data.data.isZan === 0) {

                                axios.post(sysurl + 'giveZan?' + idname + '=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            } else {
                                axios.post(sysurl + 'cancelZan?' + idname + '=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            }
                            // layer.msg(res.data.message)


                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }else {
                overy_show()
                $(".login-mask").fadeIn()
            }

        },
        download: function (id, type) {
            overy_show()
            $(".down-mask").fadeIn()
            this.$emit("showdownload", id, type)
        },

        playMusic: function (id) {
            this.$emit("playMusic", id, event.target)
        },

        sc(id) {
            this.scm = true
            this.muId = id;

        },
        out() {
            this.scm = false
            this.scma = false;
            $('.login-mask').fadeOut();
        },
        showMessageFromChild(data) {
            this.scm = data
            this.scma = data;
        },
        pla(id,t) {

            this.fk = t
            this.scma = true;
            this.zjId = id;

        },
        checkstatus: function (d) {
            this.toplist[d].ischeck = !this.toplist[d].ischeck
        },
        musicchangestatus: function () {
            this.musicchecksta = !this.musicchecksta
            this.downloadtype = 1
        },
        videochangesta: function () {
            this.videochecksta = !this.videochecksta
            this.downloadType = 2
        },
        //批量下载
        downloadmore: function () {
            var obj = this
            var arr = []
            for (i in this.toplist) {
                if (this.toplist[i].ischeck) {
                    arr.push(this.toplist[i].maskCode)
                }
            }

            if (arr.length == 0) {
                layer.msg("请先选择要下载的内容！")
                return false
            }
            arr.join(",")
            var formdata = new FormData()
            formdata.append("musicMaskCodes", arr)

            axios.post(sysurl + 'getBatchDownloadPower', formdata)
                .then(res => {
                    if (res.data.code === 0) {
                        // console.log(res.data.data);
                        // this.$options.methods.downloadlist(res.data.data)
                        for (l in res.data.data) {

                            obj.$options.methods.downloadlist(res.data.data[l])

                        }

                    } else if (res.data.code === -2) {

                        layer.confirm(res.data.data.msg, {btn: ["继续", "取消"]}, function (index) {
                            if (obj.downloadtype == 1) {
                                formdata.append(res.data.data.parameter, 1)
                                url = sysurl + 'getBatchDownloadPower?' + obj.MaskCodeName + '=' + obj.MaskCode + '&' + res.data.data.parameter + '=1'
                            } else {
                                // url = sysurl + 'getBatchDownloadPower?videoId='+obj.downloadid+'&'+obj.MaskCodeName+'='+obj.MaskCode+'&'+res.data.data.parameter+'=1'
                            }
                            axios.post(sysurl + 'getBatchDownloadPower', formdata)
                                .then(resq => {
                                    layer.close(index)
                                    if (resq.data.code === 0) {
                                        // obj.$options.methods.downloadlist(res.data.data)
                                        for (d in resq.data.data) {

                                            obj.$options.methods.downloadlist(resq.data.data[d])

                                        }

                                    } else {
                                        // layer.msg(res.data.message)


                                    }
                                }, err => {

                                })
                                .catch((error) => {

                                })


                        }, function (index) {
                            layer.close(index)
                        })

                    } else {
                        layer.msg(res.data.message)
                    }
                }, err => {

                })
                .catch((error) => {

                })

        },
        downloadlist: function (list) {

            const iframe = document.createElement("iframe");
            iframe.style.display = "none"; // 防止影响页面
            iframe.style.height = 0; // 防止影响页面
            iframe.src = list;
            document.body.appendChild(iframe);
            // 这一行必须，iframe挂在到dom树上才会发请求
            // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
            setTimeout(() => {
                iframe.remove();
            }, 5 * 60 * 1000);

        },
        checkall:function (type) {

            if(type == 1){
                for( s in this.toplist){
                    this.toplist[s].ischeck = true
                }

            }
            else{
                for( s in this.toplist){
                    this.toplist[s].ischeck = false
                }
            }
            this.all = !this.all
        },
        playMusic: function (id) {
            this.$emit("music", id, event.target)
        },


    },
    template: `<div id="top-box">

    <musicsc :muid="muId" :video="video"  v-on:muscm="showMessageFromChild" v-if="scm == true"></musicsc>
     <musicpl :zjid="zjId" :type="type" :fk="fk" v-on:muscm="showMessageFromChild" v-if="scma == true"></musicpl>

    <div class="overlay" v-if="scm == true || scma == true"  @click="out" style="display: block"></div>

		 	<div class="bg_ff mg_top40">
                <div class="main clearfix">
                    <div class="left main-left">
                        <p><img src="img/gfb.png"/></p>
                        <ul class="aside-box">
                            <li @click="changeactive(l,item)" :class="{'active':item===activeDefault,'':item!=activeDefault}" v-for="(l,item) in list" :key="item"><a class="top-list-box" href="javascript:;"><img :src="l.cover" class="top-list-icon" alt="">{{l.rankName}}</a></li>
  
                        </ul>
                    </div>
    			    <div class="right main-right">
    				<!--音乐-->
    				<div class="danqu-box active" v-if="mediaType=='music'||rankType=='user'">
	    				<div class="danqu-top">
	    					<a :class="{'active':listenDetalt==0}" @click="changeListen(0,'p')">试听榜</a>
	    					<a :class="{'active':listenDetalt==1}" @click="changeListen(1,'d')">下载榜</a>
	    				</div>
    				    <div class="mg_top20 new-wuqu-list padding_lr30">  
    				    	<div class="clearfix mg_b20 danqu-abf">
    				    		<span class="check-box left mg_top5" v-if="musicchecksta">
    				    			<label for="checkbox">
    				    			 <img src="img/check.png" v-if="all" style="cursor: pointer" @click="checkall(1)"/>
                                    <img src="img/check-checked.png" v-if="!all" style="cursor: pointer" @click="checkall(0)"/>
    				    			</label>
    				    			<input type="checkbox" name="checkbox1" id="checkbox" class="allcheck" hidden="hidden" value="" />
    				    		</span>
    				    		<div class="new-abox left width90">
<!--									<a href="javascript:;" class="active"> <img src="img/icon_bf.png">一键播放</a>-->
<!--									<a href="javascript:;"> <img src="img/icon-start.png">收藏</a>-->
									<a @click="musicchangestatus" v-if="!musicchecksta"> <img src="img/icon-plxz.png">批量操作</a>
									<a @click="musicchangestatus" v-if="musicchecksta">取消批量操作</a>
										<a @click="downloadmore" v-if="musicchecksta"> <img src="img/icon-xz.png" />下载</a>
								</div>
    				    	</div>
    				    	<div class="spun-box">
					            <div class="clearfix new-list" v-for="(t,index) in toplist" :key="index">
					            	<span class="check-box left mg_top10" v-if="musicchecksta">
	    				    			<label for="checkbox1">
	                                <img src="img/check.png" v-if="!t.ischeck" style="cursor: pointer" @click="checkstatus(index)"/>
                                    <img src="img/check-checked.png" v-if="t.ischeck" style="cursor: pointer" @click="checkstatus(index)"/>
                                    	    				    			</label>
	    				    			<input type="checkbox" name="checkbox1" id="checkbox1" class="check" hidden="hidden" value="" />
	    				    		</span>
									<span :class="{ 
		    					 'red left mg_top10': index===0,
		    					 'red1 left mg_top10': index===1,
		    					 'blue left mg_top10': index===2,
		    					 'color_9 left mg_top10': index>2,
		    					  }">
									<strong>{{thispage*showCount+index+1}}</strong>
                                            </span>
									<div class="left cs-box">
										<dl class="clearfix">
										
										
										
											<dt class="left" style="display: flex;align-items: center">
                                                <span class="over-player">
                                                   <img width="40" height="40" class="bor_r5 vertical-align_m" :src="t.cover"/>
                                                   <span class="icon-videobtn" :id="'all'+topid"><img :id="topid+'-'+t.id" class="vertical-align_m" src="img/icon-zt.png" @click="playMusic(t.id)"/></span>
    
                                                </span>
											</dt>
											<dd class="left width90" style="width: 87%!important;">
												<p class="clearfix">
													<span class="left name text">
													
													<span class="musicname" @click="todetail(3,t.musicId)">{{t.musicName}}</span>
			    			<span class="musictag" v-if="t.independent == 1"><img src="img/dubo.png" alt=""></span>
			    			<span class="musictag" v-if="t.free == 1"><img src="img/fufei.png" alt=""></span>
													</span>
													<span class="relative select-box  text-center padding_5 right" @click.stop="handelckick">
								    				<i class="color_ff">￥{{t.gold}}</i>
									    				<i class="absolute select-list"  @mouseleave.prevent="handelleave">
									    					<a @click="zan(1,t.musicId)"><img src="img/icon-zan.png">点赞</a>
                                                            <a @click="download(t.musicId,1)"><img src="img/icon-xz.png">下载</a>
                                                            <a @click="sc(t.musicId)"><img src="img/icon-start.png">收藏</a>
                                                            <a @click="pla(t.musicId)"><img src="img/icon-pl.png">评论</a>
                                                            <a @click="pla(t.musicId,1)"><img src="img/icon-fk.png">反馈</a>
									    				</i>
									    			</span>
									    			<span class="right mg_top5">更新日期：{{t.updateTime}}</span>
												</p>
												<h5 class="font_13 color_9 ranking_span">
													<span style="overflow: initial">{{t.className}}&nbsp;&nbsp;|&nbsp;&nbsp;{{t.speed}}&nbsp;&nbsp;|&nbsp;&nbsp;{{t.tone}}</span>
<!--													<span>{{t.speed}}</span>-->
<!--													<span>{{t.tone}}</span>-->
												</h5>
											</dd>
									    </dl>
									</div>
					            </div>   
					 
				            </div>  
		    			</div>	
		    		</div>	
    			
    				
	    			<!--专辑-->
    				<div class="danqu-box active" v-if="mediaType=='album'">
	    				<div class="danqu-top">
	    					<a :class="{'active':listenDetalt==0}" @click="changeListen(0,'p')">试听榜</a>
	    					<a :class="{'active':listenDetalt==1}" @click="changeListen(1,'d')">下载榜</a>
	    				</div>
    				    <div class="mg_top20 new-wuqu-list padding_lr30">  
				            <div class="clearfix new-list" v-for="(t,index) in toplist" :key="index">
								<span :class="{ 
		    					 'red left mg_top10': index===0,
		    					 'red1 left mg_top10': index===1,
		    					 'blue left mg_top10': index===2,
		    					 'color_9 left mg_top10': index>2,
		    					  }">
		    					  <strong>{{thispage*showCount+index+1}}</strong></span>
								<div class="left width90">
									<dl class="clearfix" @click="todetail(2,t.id)">
										<dt class="left"><img width="40" height="40" class="bor_r5 vertical-align_m" :src="t.albumCover"/></dt>
										<dd class="left width90">
											<p class="clearfix">
												<span class="left name text">{{t.albumName}}</span>
												<span class="right mg_top5">更新日期：{{t.albumCreated|formdata}}</span>
											</p>
											<h5 class="font_13 color_9">
												<span>{{t.albumClassName}}</span>
												<span>更新数量：{{t.musicCount}}</span>
											</h5>
										</dd>
								    </dl>
								</div>
				            </div>   
				  
			            </div>  
	    			</div>	
    			
    		
    				<!--视频-->
    		
	    			<div class="danqu-box active" v-if="mediaType=='video'">
	    				<div class="danqu-top">
	    			<a :class="{'active':listenDetalt==0}" @click="changeListen(0,'p')">试听榜</a>
	    					<a :class="{'active':listenDetalt==1}" @click="changeListen(1,'d')">下载榜</a>
	    				</div>
    				    <div class="mg_top20 new-wuqu-list padding_lr30">  
    				    	<div class="clearfix mg_b20 danqu-abf">
    				    		<span class="check-box left mg_top5" v-if="videochecksta">
    				    			<label for="checkboxb"><img src="img/check.png"/></label>
    				    			<input type="checkbox" name="checkbox1" id="checkboxb" class="allcheck" hidden="hidden" value="" />
    				    		</span>
    				    		<div class="new-abox left width90">
<!--									<a href="javascript:;" class="active"> <img src="img/icon_bf.png">一键播放</a>-->
<!--									<a href="javascript:;"> <img src="img/icon-start.png">收藏</a>-->
<!--									<a @click="videochangestatus" class="right"> <img src="img/icon-plxz.png">批量操作</a>-->
								</div>
    				    	</div>
    				    	<div class="spun-box">
					            <div class="clearfix new-list" v-for="(t,index) in toplist" :key="index">
					            	<span class="check-box left mg_top10" v-if="videochecksta">
	    				    			<label for="checkboxb1"><img src="img/check.png"/></label>
	    				    			<input type="checkbox" name="checkbox1" id="checkboxb1" class="check" hidden="hidden" value="" />
	    				    		</span>
									<span :class="{ 
		    					 'red left mg_top10': index===0,
		    					 'red1 left mg_top10': index===1,
		    					 'blue left mg_top10': index===2,
		    					 'color_9 left mg_top10': index>2,
		    					  }"><strong>{{thispage*showCount+index+1}}</strong></span>
									<div class="left cs-box">
										<dl class="clearfix" @click="todetail(1,t.id)">
											<dt class="left">
											<a href="index-DJ-list.html"><img width="50" height="35" class="bor_r5 vertical-align_m" :src="t.cover"/></a></dt>
											<dd class="left width90">
												<p class="clearfix">
													<span class="left name text">{{t.videoName}}</span>
													<span class="relative select-box  text-center padding_5 right" @click.stop="handelckick">
								    				<i class="color_ff">￥{{t.gold}}</i>
									    				<i class="absolute select-list" @mouseleave.prevent="handelleave">
									    					<a @click="zan(2,t.id)"><img src="img/icon-zan.png">点赞</a>
                                                            <a @click="download(t.id,2)"><img src="img/icon-xz.png">下载</a>
                                                            <a @click="sc(t.id)"><img src="img/icon-start.png">收藏</a>
                                                            <a @click="pla(t.id)"><img src="img/icon-pl.png">评论</a>
                                                            <a @click="pla(t.id,1)"><img src="img/icon-fk.png">反馈</a>
									    				</i>
									    			</span>
									    			<span class="right mg_top5">更新日期：{{t.updateTime|formdata}}</span>
												</p>
												<h5 class="font_13 color_9">
													<span>{{t.className}}</span>
<!--													<span>bpm：123</span>-->
<!--													<span>key：1A</span>-->
												</h5>
											</dd>
									    </dl>
									</div>
					            </div>   
					       
		    			</div>	
		    		</div>	
    				
	    		</div>
	    		<div class="padding_b50">
				    	 <div class="tcdPageCode mg_top20" id="ranking"></div>
				    </div>
	    	</div>
    	</div>
    	    </div>
        </div> `
});

//home
var home = Vue.component('home-component', {
    data: function () {
        return {
            count: 0,
        }
    },
    mounted() {

        // var swiper = new Swiper('#music-man .swiper-container', {
        //     slidesPerView: 3,
        //     slidesPerColumn: 2,
        //     spaceBetween: 30,
        //     pagination: {
        //         el: '#music-man .swiper-pagination',
        //         clickable: true,
        //     },
        // });
        // var swiper = new Swiper('.ca .swiper-container', {
        //     slidesPerView: 4,
        //     slidesPerColumn: 2,
        //     spaceBetween: 30,
        //     pagination: {
        //         el: '.ca .swiper-pagination',
        //         clickable: true,
        //     },
        // });

        // var swiper = new Swiper('.cc .swiper-container', {
        //     slidesPerView: 3,
        //     slidesPerColumn: 2,
        //     spaceBetween: 30,
        //     pagination: {
        //         el: '.cc .swiper-pagination',
        //         clickable: true,
        //     },
        // });

    },
    props: ["homelist"],

    methods: {
        changetab: function (type) {
            this.$emit("changetab", type);
        },
        music: function (id, obj) {
            this.$emit("music", id, obj)
        },
        showdownload: function (id, type) {
            this.$emit('showdownload', id, type)
        }
    },
    template: `
    <div>
    <banner-component :type="1"></banner-component>
    <div class="init-page">
    
   
     <div class="bg_ff padding_b50">
	    	<div class="width1200 clearfix">
	    		<div class="left padding_10" style="overflow: hidden;padding-right: 0;padding-left: 0;width: 100%">
	    			<!--最新舞曲-->
	    	    <dance-component @playMusic="music" @showdownload="showdownload" :homelist="homelist"></dance-component>	
	    			<!--音乐人-->
	    		<musicperson-component @playMusic="music" @showdownload="showdownload" :homelist="homelist"></musicperson-component>
	    			
	    		</div>
<!--	    		<div class="right index-right ">-->
<!--	    			-->
<!--	    			<toplist-component></toplist-component>-->
<!--	    			-->
<!--	    			<zxlist-component></zxlist-component>-->
<!--	    			-->
<!--	    		</div> -->
	    	</div>
	    </div>
	     <!--排行榜-->
	   <ranking-component></ranking-component>
    	<!--套曲-->
    	<homeTaoqu-component :homelist="homelist"></homeTaoqu-component>
    	
    	<!--DJ-->
    	<homeDv-component :homelist="homelist" @showdownload="showdownload"></homeDv-component>
    	
    	<!--热卖商品-->
    	<homeOder></homeOder>
    	
</div>
</div>
    `
});
//首页资讯

Vue.component('zxlist-component', {
    data: function () {
        return {
            count: 0,
            list: [],
            current:1
        }
    },
    filters: {
        formdata: function (val) {
            //格式化日期
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d;
        },

    },

    //tid 资源id   type 资源类型
    mounted() {

        var formdata = new FormData();
        formdata.append("currentPage",this.current)
        axios.post(sysurl2 + 'information/list')
            .then(res => {
                if (res.data.code === 0) {
                    this.list = res.data.data.list;
                    var swiper = new Swiper('.zx .swiper-container', {
                        slidesPerView: 1,
                        slidesPerColumn: 1,
                        spaceBetween: 30,
                        paginationClickable: true,
                        autoplay:true,
                        observer: true,//修改swiper自己或子元素时，自动初始化swiper
                        // observeParents:true,
                        pagination: {
                            el: '.zx .swiper-pagination',
                            clickable: true,

                        },
                    })
                } else {

                }
            }, err => {

            })
            .catch((error) => {

            })

    },
    methods: {
        todetail:function (id) {
            this.$router.push({path: '/info/detail', query: {id: id}})

        }

    },
    template: `<div class="right-bottom mg_top20 bg_ff zx">
	    				<div class="swiper-container">
						    <div class="swiper-wrapper">
						    	<div class="swiper-slide" v-for="(l,item) in list" v-if="item<3" :key="item" @click="todetail(l.id)">
						    		<h4 class="text-center font_16 padding_tb20 text">{{l.title}}</h4>
						    		<dl>
						    			<dt><img class="width100" :src="l.cover"/></dt>
						    			<dd class="padding_10">
						    				{{l.des}}
						    			</dd>
						    		</dl>
						    	</div>

						    </div>
						    <!-- Add Pagination -->
						    <div class="swiper-pagination"></div>
						  </div>
	    			</div>`
});

//最新单曲
var newSong = Vue.component('new-component', {
    data: function () {
        return {
            count: 0,
            list: [],
            detail: [],
            checksta: false,
            muId: 0,
            scm: false,
            scma: false,
            zjId: 0,
            total: 1,     // 记录总条数
            display: 15,   // 每页显示条数
            current: 1,   // 当前的页数
            songId: this.$route.query.classId,
            downloadtype: 1,
            all:true,
            fk:'',
            isOne:true
        }
    },
    filters: {
        formdata: function (val) {
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d;
        }
    },
    watch: {

        '$route': function (val, oldval) {
            this.$options.methods.getDetail(this, 1)
        }
    },
    mounted() {
        // this.$options.methods.getDetail(this, 1)
        var obj = this
        var formdata = new FormData();
        // formdata.append("parentId",0)
        // formdata.append("sub", 1)
        formdata.append("currentPage", 1)
        formdata.append("showCount", 15)
        formdata.append("classId", obj.$route.query.classId)
        axios.post(sysurl + 'findIdGetMusicList', formdata)
            .then(res => {
                if (res.data.code === 0) {
                    obj.list = res.data.data.list;
                    obj.isOne = res.data.isOne
                    $("#Songpage").createPage({
                        pageCount: res.data.data.totalPage * 1,
                        current: res.data.data.currentPage * 1,
                        backFn: function (p) {
                            obj.$options.methods.getDetails(obj, p)
                        }
                    })

                } else {

                }
            }, err => {

            })
            .catch((error) => {

            })
        axios.post(sysurl + 'findClassByCodeOrId?classId=' + obj.$route.query.classId + '&stsCount=1')
            .then(res => {
                if (res.data.code === 0) {

                    obj.detail = res.data.data;


                } else {

                }
            }, err => {

            })
            .catch((error) => {

            })
    },
    methods: {
        getDetails: function (obj, currentPage) {
            var formdata = new FormData();
            // formdata.append("parentId",0)
            // formdata.append("sub", 1)
            formdata.append("currentPage", currentPage)
            formdata.append("showCount", 15)
            formdata.append("classId", obj.$route.query.classId)


            axios.post(sysurl + 'findIdGetMusicList', formdata)
                .then(res => {
                    if (res.data.code === 0) {
                        obj.list = res.data.data.list;
                        obj.isOne = res.data.isOne


                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })
        },


        getDetail: function (obj, currentPage) {

            var formdata = new FormData();
            // formdata.append("parentId",0)
            // formdata.append("sub", 1)
            formdata.append("currentPage", currentPage)
            formdata.append("showCount", 15)
            formdata.append("classId", obj.$route.query.classId)
            axios.post(sysurl + 'findIdGetMusicList', formdata)
                .then(res => {
                    if (res.data.code === 0) {
                        obj.list = res.data.data.list;
                        obj.isOne = res.data.isOne

                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })


            axios.post(sysurl + 'findClassByCodeOrId?classId=' + obj.$route.query.classId + '&stsCount=1')
                .then(res => {
                    if (res.data.code === 0) {

                        obj.detail = res.data.data;


                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })


        },

        changetab: function (type) {
            this.$emit("changetab", type);
        },
        handelckick: function (e) {

            $(e.target).children('.select-list').fadeIn(100);
            $(e.target).parents(".newuqu-list").siblings().find('.select-list').hide()
            $(e.target).parents("li").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
            $(e.target).parents(".new-list").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix ").siblings().find('.select-list ').hide()
        },
        handelleave: function (e) {
            $(e.target).fadeOut(200)
        },
        zan: function (id) {
            var uid = getCookie('uid');
            if(uid){
                axios.post(sysurl + 'isZan?musicId=' + id + '&uid=' + uid)
                    .then(res => {
                        if (res.data.code === 0) {
                            if (res.data.data.isZan === 0) {
                                axios.post(sysurl + 'giveZan?musicId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            } else {
                                axios.post(sysurl + 'cancelZan?musicId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            }
                            // layer.msg(res.data.message)


                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }else {
                overy_show()
                $(".login-mask").fadeIn()
            }

        },
        sc(id) {
            this.scm = true
            this.muId = id;

        },
        out() {
            this.scm = false
            this.scma = false
            $('.login-mask').fadeOut();
        },
        showMessageFromChild(data) {
            this.scm = data
            this.scma = data
        },
        pla(id,t) {
            this.fk = t
            this.scma = true;
            this.zjId = id;

        },
        download: function (id, type) {
            overy_show()
            $(".down-mask").fadeIn()
            this.$emit("showdownload", id, type)
        },

        playMusic: function (id) {
            this.$emit("music", id, event.target)
        },
        todetail: function (id) {
            // this.$router.push({path: '/musicList', query: {id: id}})
        },
        checkstatus: function (d) {
            this.list[d].ischeck = !this.list[d].ischeck
        },
        changesta: function () {
            this.checksta = !this.checksta

        },
        downloadmore: function () {
            var obj = this
            var arr = []
            for (i in this.list) {
                if (this.list[i].ischeck) {
                    arr.push(this.list[i].maskCode)
                }
            }

            if (arr.length == 0) {
                layer.msg("请先选择要下载的歌曲！")
                return false
            }
            arr.join(",")
            var formdata = new FormData()
            formdata.append("musicMaskCodes", arr)

            axios.post(sysurl + 'getBatchDownloadPower', formdata)
                .then(res => {
                    if (res.data.code === 0) {
                        // console.log(res.data.data);
                        // this.$options.methods.downloadlist(res.data.data)
                        for (l in res.data.data) {

                            obj.$options.methods.downloadlist(res.data.data[l])

                        }

                    } else if (res.data.code === -2) {

                        layer.confirm(res.data.data.msg, {btn: ["继续", "取消"]}, function (index) {
                            if (obj.downloadtype == 1) {
                                formdata.append(res.data.data.parameter, 1)
                                // url = sysurl + 'getBatchDownloadPower?'+obj.MaskCodeName+'='+obj.MaskCode+'&'+res.data.data.parameter+'=1'
                            } else {
                                url = sysurl + 'getBatchDownloadPower?videoId=' + obj.downloadid + '&' + obj.MaskCodeName + '=' + obj.MaskCode + '&' + res.data.data.parameter + '=1'
                            }
                            axios.post(sysurl + 'getBatchDownloadPower', formdata)
                                .then(resq => {
                                    layer.close(index)
                                    if (resq.data.code === 0) {
                                        // obj.$options.methods.downloadlist(res.data.data)
                                        for (d in resq.data.data) {

                                            obj.$options.methods.downloadlist(resq.data.data[d])

                                        }

                                    } else {
                                        // layer.msg(res.data.message)


                                    }
                                }, err => {

                                })
                                .catch((error) => {

                                })


                        }, function (index) {
                            layer.close(index)
                        })

                    } else {
                        layer.msg(res.data.message)
                    }
                }, err => {

                })
                .catch((error) => {

                })

        },
        downloadlist: function (list) {

            const iframe = document.createElement("iframe");
            iframe.style.display = "none"; // 防止影响页面
            iframe.style.height = 0; // 防止影响页面
            iframe.src = list;
            document.body.appendChild(iframe);
            // 这一行必须，iframe挂在到dom树上才会发请求
            // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
            setTimeout(() => {
                iframe.remove();
            }, 5 * 60 * 1000);

        },
        checkall:function (type) {

            if(type == 1){
                for( s in this.list){
                    this.list[s].ischeck = true
                }

            }
            else{
                for( s in this.list){
                    this.list[s].ischeck = false
                }
            }
            this.all = !this.all
        },
        allplay:function () {
            if($("#all"+this.songId).length>0){
                $($("#all"+this.songId)[0]).find(".vertical-align_m").click()

            }
        }
    },
    template: `
      <div>
       <musicsc :muid="muId" :video="0"  v-on:muscm="showMessageFromChild" v-if="scm == true"></musicsc>
     <musicpl :zjid="zjId" :type="2" :fk="fk" v-on:muscm="showMessageFromChild" v-if="scma == true"></musicpl>
    
         <div class="overlay" v-if="scm == true || scma" @click="out" style="display: block"></div>
         <div class="overlay" v-if="scm == true" @click="out" style="display: block"></div>
        <div class="new-box">
         <div class="bg-cover" :style="{backgroundImage: 'url(' + detail.cover + ')' }"></div>
			<div class="width1200">
				<dl class="clearfix">
				
					<dt class="left"><img width="220" height="158"  style="object-fit: cover" :src="detail.cover"/></dt>
					<dd class="left">
						<h2 class="color_ff">{{detail.className}}</h2>
						<p class="mg_top10">
							<span class="color_b mg_r20">歌曲：{{detail.musicCount}}首</span>
							<span class="color_b mg_left20">更新时间：{{detail.updateTime|formdata}}</span>
						</p>
						<div class="new-abox mg_top40">
							<a @click="allplay" class="active video-paly"> <img src="img/icon_bf.png" />全部播放</a>
<!--							<a href="javascript:;"> <img src="img/icon_sc.png" />收藏</a>-->
							<a @click="changesta" v-if="!checksta"> <img src="img/icon_pl.png" />批量操作</a>
							<a @click="changesta" v-if="checksta">取消批量操作</a>
							<a @click="downloadmore" v-if="checksta"> <img src="img/icon-xz1.png" />下载</a>
							
						</div>
					</dd>
				</dl>
			</div>
		</div>
    	<div class="bg_ff">
    		<div class="width1200 clearfix">
    			<h4 class="tittle padding_10 bor_b ">
    				<img width="30" class="vertical-align_m mg_r10" :src="detail.cover">
    				<strong class="blue font_16">{{detail.className}} </strong>
    				<strong class="color_b">music list</strong>
    			</h4>
    			<div class=" new-wuqu-list">
    				<div class="clearfix bg_b padding_10">
    				<span class="check-box left mg_top5" v-if="checksta">
				<label for="checkbox">
				<img src="img/check.png" v-if="all" style="cursor: pointer" @click="checkall(1)"/>
				<img src="img/check-checked.png" v-if="!all" style="cursor: pointer" @click="checkall(0)"/>
				</label>
				<input type="checkbox" name="checkbox1" id="checkbox" class="allcheck" hidden="hidden" value="" />
				</span>
    				
    				
		    			<p class="left">
			    			<span style="margin-left: 66px;">歌名</span>
		    		    </p>
		    		   <p class="right">
		    		    	<span v-if="!isOne">时长 </span>
		    		    	<span v-if="isOne">分类</span>
			    			<span>BPM</span>
			    			<span> KEY </span>
			    			<span style="margin-right: 130px;">更新日期</span>
		    		    </p>
		    		</div>
				<div class="clearfix  new-list" v-for="(l,item) in list" :key="item" >
		    			<p class="left" style="display: flex;align-items: center">
		    			    <span class="check-box left " style="margin-left: 5px;" v-if="checksta">
                                <label for="checkbox">
                                    <img src="img/check.png" v-if="!l.ischeck" style="cursor: pointer" @click="checkstatus(item)"/>
                                    <img src="img/check-checked.png" v-if="l.ischeck" style="cursor: pointer" @click="checkstatus(item)"/>
                                </label>
                                <input type="checkbox" name="checkbox1" id="checkbox" class="allcheck" hidden="hidden" value="" />
                            </span>
		    				<span class="over-player"><img width="40" height="40" class="bor_r5 vertical-align_m" :src="l.cover"/>
		    				 <span class="icon-videobtn" :id="'all'+songId"><img :id="songId+'-'+l.id" class="vertical-align_m" src="img/icon-zt.png" @click="playMusic(l.id)"/></span>
		    				</span>
                           

			    			<span class="text name" @click="todetail(l.id)"><span class="musicname">{{l.musicName}}</span>
			    			<span class="musictag" v-if="l.independent == 1"><img src="img/dubo.png" alt=""></span>
			    			<span class="musictag" v-if="l.free == 1"><img src="img/fufei.png" alt=""></span>
			    			
			    		
			    			</span>
			    		</p>
			    		<div class="right">
			    			    <span v-if="!isOne">{{l.times}}</span>
                                <span v-if="isOne">{{l.className}}</span>
				    			<span>{{l.speed}}</span>
				    			<span>{{l.tone}}</span>
				    			<span>{{l.updateTime|formdata}}</span>
			    			<span class="relative select-box  text-center padding_5" @click.stop="handelckick">
			    				<i class="color_ff" >￥{{l.gold}}</i>
			    			   <i class="absolute select-list" @mouseleave.prevent="handelleave">
                                                            <a @click="zan(l.id)"><img src="img/icon-zan.png">点赞</a>
                                                            <a @click="download(l.id,1)"><img src="img/icon-xz.png">下载</a>
                                                            <a @click="sc(l.id)"><img src="img/icon-start.png">收藏</a>
                                                            <a @click="pla(l.id)"><img src="img/icon-pl.png">评论</a>
                                                            <a @click="pla(l.id,1)"><img src="img/icon-fk.png">反馈</a>
                                                        </i>
			    			</span>
			    		</div>
		    		</div>
		   
    		   </div>
    		    <div class="padding_b50">
                        <div class="tcdPageCode mg_top20" id="Songpage"></div>
 			    </div>
    		</div>
    	</div>
</div>
    `
});

//音乐详情
var musicList = Vue.component('musiclist-component', {
    data: function () {
        return {
            count: [],
            info: {},
            play: '',
            detail: [],
            tid: this.$route.query.id,
            type: '2',
            scm: false,
            scma: false,
            zjId: 0,
            bf:true,
            fk:'',
            share:false

        }
    },
    filters: {
        formdata: function (val) {
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d;
        }
    },
    props:["objtemp",'playmc'],
    watch:{
        'playmc':function () {
            this.bf = !this.playmc
        }
    },
    mounted() {
        if(!$("#Music")[0].paused){
            if(this.$route.query.id == this.objtemp.split("-")[1]){
                this.bf = false
            }else{
                this.bf = true
            }
        }else{
            this.bf = true
        }

        axios.post(sysurl + 'findMusicId?id=' + this.$route.query.id)
            .then(res => {
                if (res.data.code === 0) {
                    this.info = res.data.data

                } else {

                }
            }, err => {

            })
            .catch((error) => {

            })


    },
    methods: {

        getdetail: function (obj) {
            axios.post(sysurl + 'findMusicId?id=' + obj.$route.query.id)
                .then(res => {
                    if (res.data.code === 0) {
                        obj.info = res.data.data

                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })
        },

        zan: function (id) {
            var uid = getCookie('uid');
            if(uid){
                axios.post(sysurl + 'isZan?musicId=' + id + '&uid=' + uid)
                    .then(res => {
                        if (res.data.code === 0) {
                            if (res.data.data.isZan === 0) {
                                axios.post(sysurl + 'giveZan?musicId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)
                                            this.$options.methods.getdetail(this)

                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            } else {
                                axios.post(sysurl + 'cancelZan?musicId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)
                                            this.$options.methods.getdetail(this)

                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            }
                            // layer.msg(res.data.message)


                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }else {
                overy_show()
                $(".login-mask").fadeIn()
            }


        },
        download: function (id, type) {
            overy_show()
            $(".down-mask").fadeIn()
            this.$emit("showdownload", id, type)
        },
        sc(id) {
            this.scm = true
            this.muId = id;

        },
        out() {
            this.scm = false
            this.scma = false;
            $('.login-mask').fadeOut();
        },
        showMessageFromChild(data) {
            this.scm = data
            this.scma = data;
        },
        pla(id,t) {
            this.fk = t
            this.scma = true;
            this.zjId = id;

        },
        playthis:function () {

            if(this.bf){

                if(this.$route.query.id == this.objtemp.split("-")[1]){
                    this.$emit("playthis")
                }else{
                    this.$emit("music",this.$route.query.id,event.target)
                }


            }else{

                this.$emit("playthis")

            }
            this.bf = !this.bf
        },
        shareShow:function () {
            this.share = !this.share
        }

    },
    template: `
     <div>
      <musicsc :muid="muId" :video="0"  v-on:muscm="showMessageFromChild" v-if="scm == true"></musicsc>
     <musicpl :zjid="zjId" :type="2" :fk="fk" v-on:muscm="showMessageFromChild" v-if="scma == true"></musicpl>

    <div class="overlay" v-if="scm == true || scma == true"  @click="out" style="display: block"></div>
        <div class="new-box">
\t\t\t<div class="width1200">
\t\t\t\t<dl class="clearfix">
\t\t\t\t\t<dt class="left"><img width="220" height="158" :src="info.cover"/></dt>
\t\t\t\t\t<dd class="left">
\t\t\t\t\t\t<h2 class="color_ff">{{info.musicName}}</h2>
\t\t\t\t\t\t<p class="mg_top10">
\t\t\t\t\t\t\t<span class="color_b mg_r20">{{info.className}}</span>
\t\t\t\t\t\t</p>
\t\t\t\t\t</dd>
\t\t\t\t</dl>
\t\t\t</div>
\t\t</div>
    \t<div class="bg_ff">
    \t\t<div class="width1200 clearfix">
    \t\t\t<div class="play-abox mg_tb20">
    \t\t\t\t<a @click="playthis" :id="'mc-'+tid" class="active" v-if="bf">播放</a>
    \t\t\t\t<a @click="playthis" class="active" :id="'mc-'+tid" v-if="!bf">暂停</a>
    \t\t\t\t<a @click="download(info.id,1)" class="active"><img src="img/icon-xz1.png"/>下载</a>
    \t\t\t\t<a href="javascript:;" class="relative share-a" @click="shareShow">
    \t\t\t\t\t<img src="img/icon-start.png" />
    \t\t\t\t分享
<!--    \t\t\t\t<i class="share-link absolute">链接:链接：httpxxxxxxxx</i>-->
    \t\t\t\t</a>
    \t\t\t\t<a @click="zan(info.id)"><img src="img/icon-zan.png"/>点赞({{info.zan}})</a>
    \t\t\t\t<a @click="pla(info.id,1)"><img src="img/icon-fk.png" alt="" />反馈</a>


<div class="bshare-custom" style="float: right" v-show="share"><a title="分享到QQ空间" class="bshare-qzone"></a><a title="分享到新浪微博" class="bshare-sinaminiblog"></a><a title="分享到人人网" class="bshare-renren"></a><a title="分享到腾讯微博" class="bshare-qqmb"></a><a title="分享到网易微博" class="bshare-neteasemb"></a><a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a><span class="BSHARE_COUNT bshare-share-count">0</span></div>

    \t\t\t</div>
    
    
    \t\t\t<div id="music_player" class="play-box">
\t\t\t\t\t<div class="music_player_inner">

\t\t\t\t\t</div>
    \t\t    </div>
    
    \t\t    <ul class="clearfix paly-inform">
    \t\t    \t<li class="left relative">
    \t\t    \t\t<h4><strong>{{info.times}}</strong></h4>
    \t\t    \t\t<p class="color_9">时间长度</p>
    \t\t    \t</li>
    \t\t    \t<li class="left relative">
    \t\t    \t\t<h4><strong>{{info.speed}}</strong></h4>
    \t\t    \t\t<p class="color_9">BPM</p>
    \t\t    \t</li>
    \t\t    \t<li class="left relative">
    \t\t    \t\t<h4><strong>{{info.tone}}</strong></h4>
    \t\t    \t\t<p class="color_9">KEY</p>
    \t\t    \t</li>
    \t\t    \t<li class="left relative">
    \t\t    \t\t<h4><strong>{{info.sizeDes}}</strong></h4>
    \t\t    \t\t<p class="color_9">大小</p>
    \t\t    \t</li>
    \t\t    \t<li class="left relative">
    \t\t    \t\t<h4><strong>{{info.className}}</strong></h4>
    \t\t    \t\t<p class="color_9">分类</p>
    \t\t    \t</li>
    \t\t    \t<li class="left relative">
    \t\t    \t\t<h4><strong>{{info.updateTime|formdata}}</strong></h4>
    \t\t    \t\t<p class="color_9">更新时间</p>
    \t\t    \t</li>
    \t\t    </ul>

        <pinglun-component :tid="tid" :type="type"></pinglun-component>
      </div>
    </div>
</div>
    `
});


//评论列表组件

Vue.component('pinglun-component', {
    data: function () {
        return {
            count: 0,
            list: [],
            total: '',
            content: '',
            cu: 1
        }
    },
    filters: {
        formdata: function (val) {
            //格式化日期
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d;
        },
        zero: function (val) {
            //格式化点赞数
            var newdata = ''
            if (val == 0 || val == null) {
                newdata = ''
            } else {
                newdata = val
            }

            return newdata
        }
    },
    props: ["tid", 'type'],
    //tid 资源id   type 资源类型
    mounted() {
        var _this = this
        axios.post(sysurl2 + 'comment/list?tid=' + this.tid + '&type=' + this.type)
            .then(res => {
                //获取列表 初始化
                if (res.data.code === 0) {
                    _this.list = res.data.data.list
                    _this.total = res.data.data.totalResult
                    $("#Songpage").createPage({
                        pageCount: res.data.data.totalPage * 1,
                        current: res.data.data.currentPage * 1,
                        backFn: function (p) {
                            _this.cu = p
                            _this.$options.methods.getDetails(_this, p)
                        }
                    })

                } else {

                }
            }, err => {

            })
            .catch((error) => {

            })
    },
    methods: {
        getDetails(obj, p) {
            //获取评论列表
            axios.post(sysurl2 + 'comment/list?tid=' + obj.tid + '&currentPage=' + p + '&type=' + obj.type)
                .then(res => {
                    if (res.data.code === 0) {
                        obj.list = res.data.data.list
                        obj.total = res.data.data.totalResult
                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })
        },
        comment: function (id) {
            //发表评论（当前资源）
            var _this = this
            var formdata = new FormData();
            formdata.append("content", this.content)
            formdata.append("tid", this.tid)
            formdata.append("type", this.type)

            axios.post(sysurl2 + 'comment/sub', formdata)
                .then(res => {
                    this.content = ''
                    if (res.data.code === 0) {

                        layer.msg(res.data.message, function () {


                        })
                        _this.cu = 1
                        _this.$options.methods.getDetails(_this, 1)

                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })
        },

        zan: function (id) {
            //评论点赞
            var _this = this
            var uid = getCookie('uid');
            if(uid){
                axios.post(sysurl2 + 'comment/isZan?id=' + id)
                    .then(res => {
                        //是否点赞
                        if (res.data.code === 0) {
                            if (res.data.data.isZan === 0) {
                                axios.post(sysurl2 + 'comment/like?id=' + id)
                                    .then(res => {
                                        //点赞
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)
                                            _this.$options.methods.getDetails(_this, _this.cu)

                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            } else {
                                axios.post(sysurl2 + 'comment/cancelZan?id=' + id)
                                    .then(res => {
                                        //取消点赞
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)
                                            _this.$options.methods.getDetails(_this, _this.cu)

                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            }


                            // layer.msg(res.data.message)

                        } else {

                            // layer.msg(res.data.message)
                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }else {
                overy_show()
                $(".login-mask").fadeIn()
            }

        },

    },
    template: `
   <div class="mg_top20">
        <div class="pl-box mg_top20">
\t\t\t\t\t<h3 class="font_18">评论<span class="font_13 color_9 mg_left10">共{{total}}条评论</span></h3>
\t\t\t\t\t<div class="textarea-box mg_top20 text-center ">
\t\t\t\t\t\t<textarea name="" rows="" cols="" placeholder="请输入......." v-model="content"></textarea>
\t\t\t\t\t\t<p class="mg_top20 text_right padding_lr30"><a href="javascript:;" class="basic_a" @click="comment(tid)">评论</a></p>
\t\t\t\t\t</div>
\t\t\t\t</div>
        <div class="pl-list mg_tb20 padding_10">
\t\t\t\t\t<h4 class="font_16 padding_tb10 bor_b">全部评论</h4>
\t\t\t\t\t<dl class="padding_10 bor_b clearfix" v-for="l in list">
\t\t\t\t\t\t<dt class="left"><router-link :to="'/My?userId='+l.fromUid"><img class="pl-head" :src="l.HEADURL"></router-link></dt>
\t\t\t\t\t\t<dd class="left width90">
\t\t\t\t\t\t\t<p>{{l.NICKNAME}}</p>
\t\t\t\t\t\t\t<div class="clearfix mg_top5">
\t\t\t\t\t\t\t\t<div class="left">
\t\t\t\t\t\t\t\t\t<p class="color_9">{{l.created|formdata}}</p>
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<div class="right">
\t\t\t\t\t\t\t\t\t<span class="mg_r20"><a href="javascript:;"><img class="vertical-align_m" src="img/icon-zan.png" @click="zan(l.id)"> {{l.zan|zero}}</a></span>
<!--\t\t\t\t\t\t\t\t\t<span><a href="javascript:;"><img class="vertical-align_m" src="img/icon-pl.png"> 23</a></span>-->
\t\t\t\t\t\t\t\t</div>
                
              
\t\t\t\t\t\t\t</div>
                  <p style="line-height: 2">{{l.content}}</p>
\t\t\t\t\t\t</dd>
\t\t\t\t\t</dl>

 </div>
 
    <div class="padding_b50">
                        <div class="tcdPageCode mg_top20" id="Songpage"></div>
 			    </div>
</div>
    `
});


//hip hop
Vue.component('hip-component', {
    data: function () {
        return {
            count: 0,
        }
    },
    mounted() {
        $(function () {
            $(".tcdPageCode").createPage({
                pageCount: 30,
                current: 1,
                backFn: function (p) {
                    //console.log(p);
                }
            });

        })
        $(".select-box").click(function () {
            $(this).children('.select-list').fadeIn(200);
            $(this).parents(".newuqu-list").siblings().find('.select-list').hide()
            $(this).parents("li").siblings().find('.select-list').hide()
            $(this).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
            $(this).parents(".new-list").siblings().find('.select-list').hide()
            $(this).parents(".clearfix ").siblings().find('.select-list ').hide()
        })
        $(".select-list").mouseleave(function () {
            $(this).fadeOut(200)
        })

    },
    methods: {
        changetab: function (type) {
            this.$emit("changetab", type);
        }
    },
    template: `
   <div>
    <div class="new-box">
			<div class="width1200">
				<dl class="clearfix">
					<dt class="left"><img width="220" src="img/new-img.png"/></dt>
					<dd class="left">
						<h2 class="color_ff">Jackie Chan</h2>
						<p class="mg_top10">
							<span class="color_b mg_r20">歌曲：1000首</span>
							<span class="color_b mg_left20">更新时间：2018-10-10</span>
						</p>
						<div class="new-abox mg_top40">
							<a href="javascript:;" class="active"> <img src="img/icon_bf.png" />全部播放</a>
<!--							<a href="javascript:;"> <img src="img/icon_sc.png" />收藏</a>-->
							<a @click="changetab(4)"> <img src="img/icon_pl.png" />批量操作</a>
						</div>
					</dd>
				</dl>
			</div>
		</div>
    	<div class="bg_ff">
    		<div class="width1200 clearfix">
    			<h4 class="tittle padding_10 bor_b">
    				<img width="30" class="vertical-align_m mg_r10" src="img/index-tittleimg.png">
    				<strong class="blue font_16">HIP <span class="color_00">HOP</span></strong>
    				<strong class="color_b">hip hop</strong>
    			</h4>
    			<!--<div class="padding_tb20 new-wuqu-list">
    				<div class="clearfix bg_b padding_5">
		    			<p class="left mg_top5">
			    			<span class="text name" style="margin-left:120px ;">歌曲</span>
			    		</p>
			    		<div class="right">
			    			<span>试听量</span>
			    			<span>BPM</span>
			    			<span>KEY</span>
			    			<span style="margin-right: 113px;">更新时间</span>
			    		</div>
		    	   </div>
					<div class="clearfix  active new-list">
		    			<p class="left mg_top5">
		    				<span><img width="40" height="40" class="bor_r5 vertical-align_m" src="img/new-small.png"></span>
			    			<span><img class="vertical-align_m" src="img/icon-bf.png"></span>
			    			<span class="text name">Original Mix</span>
			    		</p>
			    		<div class="right">
			    			<span>125</span>
			    			<span>124</span>
			    			<span>1A</span>
			    			<span>2018-10-25</span>
			    			<span class="relative select-box  text-center padding_5">
			    				<i class="color_ff">￥2.00</i>
			    				<i class="absolute select-list">
			    					<a href="javascript:;"><img src="img/icon-zan.png">点赞</a>
			    					<a href="javascript:;"><img src="img/icon-xz.png">下载</a>
			    					<a href="javascript:;"><img src="img/icon-start.png">收藏</a>
			    					<a href="javascript:;"><img src="img/icon-pl.png">评论</a>
			    					<a href="javascript:;"><img src="img/icon-fk.png">反馈</a>
			    				</i>
			    			</span>
			    		</div>
		    	   </div>
			    	<div class="clearfix new-list">
		    			<p class="left mg_top5">
		    				<span><img width="40" height="40" class="bor_r5 vertical-align_m" src="img/new-small.png"></span>
			    			<span><img class="vertical-align_m" src="img/icon-zt.png"></span>
			    			<span class="text name">Original Mix</span>
			    		</p>
			    		<div class="right">
			    			<span>125</span>
			    			<span>124</span>
			    			<span>1A</span>
			    			<span>2018-10-25</span>
			    			<span class="relative select-box  text-center padding_5">
			    				<i class="color_ff">￥2.00</i>
			    				<i class="absolute select-list">
			    					<a href="javascript:;"><img src="img/icon-zan.png">点赞</a>
			    					<a href="javascript:;"><img src="img/icon-xz.png">下载</a>
			    					<a href="javascript:;"><img src="img/icon-start.png">收藏</a>
			    					<a href="javascript:;"><img src="img/icon-pl.png">评论</a>
			    					<a href="javascript:;"><img src="img/icon-fk.png">反馈</a>
			    				</i>
			    			</span>
			    		</div>
		    	   </div>
			    	<div class="clearfix new-list">
		    			<p class="left mg_top5">
		    				<span><img width="40" height="40" class="bor_r5 vertical-align_m" src="img/new-small.png"></span>
			    			<span><img class="vertical-align_m" src="img/icon-zt.png"></span>
			    			<span class="text name">Original Mix</span>
			    		</p>
			    		<div class="right">
			    			<span>125</span>
			    			<span>124</span>
			    			<span>1A</span>
			    			<span>2018-10-25</span>
			    			<span class="relative select-box  text-center padding_5">
			    				<i class="color_ff">￥2.00</i>
			    				<i class="absolute select-list">
			    					<a href="javascript:;"><img src="img/icon-zan.png">点赞</a>
			    					<a href="javascript:;"><img src="img/icon-xz.png">下载</a>
			    					<a href="javascript:;"><img src="img/icon-start.png">收藏</a>
			    					<a href="javascript:;"><img src="img/icon-pl.png">评论</a>
			    					<a href="javascript:;"><img src="img/icon-fk.png">反馈</a>
			    				</i>
			    			</span>
			    		</div>
		    	    </div>
			    	<div class="clearfix new-list">
		    			<p class="left mg_top5">
		    				<span><img width="40" height="40" class="bor_r5 vertical-align_m" src="img/new-small.png"></span>
			    			<span><img class="vertical-align_m" src="img/icon-zt.png"></span>
			    			<span class="text name">Original Mix</span>
			    		</p>
			    		<div class="right">
			    			<span>125</span>
			    			<span>124</span>
			    			<span>1A</span>
			    			<span>2018-10-25</span>
			    			<span class="relative select-box  text-center padding_5">
			    				<i class="color_ff">￥2.00</i>
			    				<i class="absolute select-list">
			    					<a href="javascript:;"><img src="img/icon-zan.png">点赞</a>
			    					<a href="javascript:;"><img src="img/icon-xz.png">下载</a>
			    					<a href="javascript:;"><img src="img/icon-start.png">收藏</a>
			    					<a href="javascript:;"><img src="img/icon-pl.png">评论</a>
			    					<a href="javascript:;"><img src="img/icon-fk.png">反馈</a>
			    				</i>
			    			</span>
			    		</div>
		    	    </div>
		    	    <div class="clearfix new-list">
		    			<p class="left mg_top5">
		    				<span><img width="40" height="40" class="bor_r5 vertical-align_m" src="img/new-small.png"></span>
			    			<span><img class="vertical-align_m" src="img/icon-zt.png"></span>
			    			<span class="text name">Original Mix</span>
			    		</p>
			    		<div class="right">
			    			<span>125</span>
			    			<span>124</span>
			    			<span>1A</span>
			    			<span>2018-10-25</span>
			    			<span class="relative select-box  text-center padding_5">
			    				<i class="color_ff">￥2.00</i>
			    				<i class="absolute select-list">
			    					<a href="javascript:;"><img src="img/icon-zan.png">点赞</a>
			    					<a href="javascript:;"><img src="img/icon-xz.png">下载</a>
			    					<a href="javascript:;"><img src="img/icon-start.png">收藏</a>
			    					<a href="javascript:;"><img src="img/icon-pl.png">评论</a>
			    					<a href="javascript:;"><img src="img/icon-fk.png">反馈</a>
			    				</i>
			    			</span>
			    		</div>
		    	    </div>
    			</div>-->
    			<div class="padding_tb20 new-wuqu-list">
    				<div class="clearfix bg_b padding_10">
		    			<p class="left">
			    			<span style="margin-left: 100px;">歌名</span>
		    		    </p>
		    		    <p class="right">
		    		    	<span>时长 </span>
		    		    	<!--<span>类型</span>-->
			    			<span>BPM</span>
			    			<span> KEY </span>
			    			<span style="margin-right: 130px;">更新日期</span>
		    		    </p>
		    		</div>
					<div class="clearfix  active new-list">
		    			<p class="left">
			    			<span><img width="40" height="40" class="bor_r5 vertical-align_m" src="img/new-small.png"></span>
			    			<span><img class="vertical-align_m" src="img/icon-bf.png"></span>
			    			<span class="text name">Original Mix</span>
			    		</p>
			    		<div class="right">
			    			<span>03:22</span>

				    			<span>124</span>
				    			<span>1A</span>
				    			<span>2018-11-21</span>
			    			<span class="relative select-box  text-center padding_5">
			    				<i class="color_ff">￥2.00</i>
			    				<i class="absolute select-list">
			    					<a href="javascript:;"><img src="img/icon-zan.png">点赞</a>
			    					<a href="javascript:;"><img src="img/icon-xz.png">下载</a>
			    					<a href="javascript:;"><img src="img/icon-start.png">收藏</a>
			    					<a href="javascript:;"><img src="img/icon-pl.png">评论</a>
			    					<a href="javascript:;"><img src="img/icon-fk.png">反馈</a>
			    				</i>
			    			</span>
			    		</div>
		    		</div>
		    		<div class="clearfix  new-list">
		    			<p class="left">
			    			<span><img width="40" height="40" class="bor_r5 vertical-align_m" src="img/new-small.png"></span>
			    			<span><img class="vertical-align_m" src="img/icon-zt.png"></span>
			    			<span class="text name">Original Mix</span>
			    		</p>
			    		<div class="right">
			    			<span>03:22</span>

				    			<span>124</span>
				    			<span>1A</span>
				    			<span>2018-11-21</span>
			    			<span class="relative select-box  text-center padding_5">
			    				<i class="color_ff">￥2.00</i>
			    				<i class="absolute select-list">
			    					<a href="javascript:;"><img src="img/icon-zan.png">点赞</a>
			    					<a href="javascript:;"><img src="img/icon-xz.png">下载</a>
			    					<a href="javascript:;"><img src="img/icon-start.png">收藏</a>
			    					<a href="javascript:;"><img src="img/icon-pl.png">评论</a>
			    					<a href="javascript:;"><img src="img/icon-fk.png">反馈</a>
			    				</i>
			    			</span>
			    		</div>
		    		</div>
		    		<div class="clearfix  new-list">
		    			<p class="left">
			    			<span><img width="40" height="40" class="bor_r5 vertical-align_m" src="img/new-small.png"></span>
			    			<span><img class="vertical-align_m" src="img/icon-zt.png"></span>
			    			<span class="text name">Original Mix</span>
			    		</p>
			    		<div class="right">
			    			<span>03:22</span>

				    			<span>124</span>
				    			<span>1A</span>
				    			<span>2018-11-21</span>
			    			<span class="relative select-box  text-center padding_5">
			    				<i class="color_ff">￥2.00</i>
			    				<i class="absolute select-list">
			    					<a href="javascript:;"><img src="img/icon-zan.png">点赞</a>
			    					<a href="javascript:;"><img src="img/icon-xz.png">下载</a>
			    					<a href="javascript:;"><img src="img/icon-start.png">收藏</a>
			    					<a href="javascript:;"><img src="img/icon-pl.png">评论</a>
			    					<a href="javascript:;"><img src="img/icon-fk.png">反馈</a>
			    				</i>
			    			</span>
			    		</div>
		    		</div>
		    		<div class="clearfix  new-list">
		    			<p class="left">
			    			<span><img width="40" height="40" class="bor_r5 vertical-align_m" src="img/new-small.png"></span>
			    			<span><img class="vertical-align_m" src="img/icon-zt.png"></span>
			    			<span class="text name">Original Mix</span>
			    		</p>
			    		<div class="right">
			    			<span>03:22</span>

				    			<span>124</span>
				    			<span>1A</span>
				    			<span>2018-11-21</span>
			    			<span class="relative select-box  text-center padding_5">
			    				<i class="color_ff">￥2.00</i>
			    				<i class="absolute select-list">
			    					<a href="javascript:;"><img src="img/icon-zan.png">点赞</a>
			    					<a href="javascript:;"><img src="img/icon-xz.png">下载</a>
			    					<a href="javascript:;"><img src="img/icon-start.png">收藏</a>
			    					<a href="javascript:;"><img src="img/icon-pl.png">评论</a>
			    					<a href="javascript:;"><img src="img/icon-fk.png">反馈</a>
			    				</i>
			    			</span>
			    		</div>
		    		</div>
		    		<div class="clearfix  new-list">
		    			<p class="left">
			    			<span><img width="40" height="40" class="bor_r5 vertical-align_m" src="img/new-small.png"></span>
			    			<span><img class="vertical-align_m" src="img/icon-zt.png"></span>
			    			<span class="text name">Original Mix</span>
			    		</p>
			    		<div class="right">
			    			<span>03:22</span>

				    			<span>124</span>
				    			<span>1A</span>
				    			<span>2018-11-21</span>
			    			<span class="relative select-box  text-center padding_5">
			    				<i class="color_ff">￥2.00</i>
			    				<i class="absolute select-list">
			    					<a href="javascript:;"><img src="img/icon-zan.png">点赞</a>
			    					<a href="javascript:;"><img src="img/icon-xz.png">下载</a>
			    					<a href="javascript:;"><img src="img/icon-start.png">收藏</a>
			    					<a href="javascript:;"><img src="img/icon-pl.png">评论</a>
			    					<a href="javascript:;"><img src="img/icon-fk.png">反馈</a>
			    				</i>
			    			</span>
			    		</div>
		    		</div>
		    		<div class="clearfix  new-list">
		    			<p class="left">
			    			<span><img width="40" height="40" class="bor_r5 vertical-align_m" src="img/new-small.png"></span>
			    			<span><img class="vertical-align_m" src="img/icon-zt.png"></span>
			    			<span class="text name">Original Mix</span>
			    		</p>
			    		<div class="right">
			    			<span>03:22</span>

				    			<span>124</span>
				    			<span>1A</span>
				    			<span>2018-11-21</span>
			    			<span class="relative select-box  text-center padding_5">
			    				<i class="color_ff">￥2.00</i>
			    				<i class="absolute select-list">
			    					<a href="javascript:;"><img src="img/icon-zan.png">点赞</a>
			    					<a href="javascript:;"><img src="img/icon-xz.png">下载</a>
			    					<a href="javascript:;"><img src="img/icon-start.png">收藏</a>
			    					<a href="javascript:;"><img src="img/icon-pl.png">评论</a>
			    					<a href="javascript:;"><img src="img/icon-fk.png">反馈</a>
			    				</i>
			    			</span>
			    		</div>
		    		</div>
		    		<div class="clearfix  new-list">
		    			<p class="left">
			    			<span><img width="40" height="40" class="bor_r5 vertical-align_m" src="img/new-small.png"></span>
			    			<span><img class="vertical-align_m" src="img/icon-zt.png"></span>
			    			<span class="text name">Original Mix</span>
			    		</p>
			    		<div class="right">
			    			<span>03:22</span>

				    			<span>124</span>
				    			<span>1A</span>
				    			<span>2018-11-21</span>
			    			<span class="relative select-box  text-center padding_5">
			    				<i class="color_ff">￥2.00</i>
			    				<i class="absolute select-list">
			    					<a href="javascript:;"><img src="img/icon-zan.png">点赞</a>
			    					<a href="javascript:;"><img src="img/icon-xz.png">下载</a>
			    					<a href="javascript:;"><img src="img/icon-start.png">收藏</a>
			    					<a href="javascript:;"><img src="img/icon-pl.png">评论</a>
			    					<a href="javascript:;"><img src="img/icon-fk.png">反馈</a>
			    				</i>
			    			</span>
			    		</div>
		    		</div>
    		   </div>
    			<div class="padding_b50 ">
			    	<div class="tcdPageCode mg_top20"></div>
			    </div>
    		</div>
    	</div>
</div>
    `
});

//dv

var dv = Vue.component('dv-component', {
    data: function () {
        return {
            count: 0,
            list: [],
            detail: [],
            muId: 0,
            scm: false,
            scma: false,
            zjId: 0,
            fk:''

        }
    },
    filters: {
        formdata: function (val) {
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d;
        }
    },
    watch: {

        '$route': function (val, oldval) {
            this.$options.methods.getDetail(this, 1)
        }
    },
    mounted() {

        this.$options.methods.getDetail(this, 1)

    },
    methods: {

        getDetails: function (obj, currentPage) {

            var formdata = new FormData();
            // formdata.append("parentId",0)
            formdata.append("secClassId", obj.$route.query.classId)
            formdata.append("currentPage", currentPage)
            formdata.append("showCount", 8)


            axios.post(sysurl + 'findVideoIdByList', formdata)
                .then(res => {
                    if (res.data.code === 0) {
                        obj.list = res.data.data.list;
                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })
        },
        getDetail: function (obj, currentPage) {

            var formdata = new FormData();
            // formdata.append("parentId",0)
            formdata.append("secClassId", obj.$route.query.classId)
            formdata.append("currentPage", currentPage)
            formdata.append("showCount", 8)


            axios.post(sysurl + 'findVideoIdByList', formdata)
                .then(res => {
                    if (res.data.code === 0) {
                        obj.list = res.data.data.list;
                        $("#Dvpage").createPage({
                            pageCount: res.data.data.totalPage * 1,
                            current: res.data.data.currentPage * 1,
                            backFn: function (p) {
                                obj.$options.methods.getDetails(obj, p)
                            }
                        })

                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })

            axios.post(sysurl + 'findClassByCodeOrId?classId=' + obj.$route.query.classId + '&stsCount=1')
                .then(res => {
                    if (res.data.code === 0) {

                        obj.detail = res.data.data;


                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })
        },


        handelckick: function (e) {

            $(e.target).children('.select-list').fadeIn(100);
            $(e.target).parents(".newuqu-list").siblings().find('.select-list').hide()
            $(e.target).parents("li").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
            $(e.target).parents(".new-list").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix ").siblings().find('.select-list ').hide()

        },
        handelleave: function () {
            $(event.target).parent().find(".select-list").fadeOut(200)
        },

        zan: function (id) {
            var uid = getCookie('uid');
            if(uid){
                axios.post(sysurl + 'isZan?videoId=' + id + '&uid=' + uid)
                    .then(res => {
                        if (res.data.code === 0) {
                            if (res.data.data.isZan === 0) {
                                axios.post(sysurl + 'giveZan?videoId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            } else {
                                axios.post(sysurl + 'cancelZan?videoId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            }
                            // layer.msg(res.data.message)


                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }else {
                overy_show()
                $(".login-mask").fadeIn()
            }

        },
        sc(id) {
            this.scm = true
            this.muId = id;

        },
        out() {
            this.scm = false
            this.scma = false
            $('.login-mask').fadeOut();
        },
        showMessageFromChild(data) {
            this.scm = data
            this.scma = data
        },
        pla(id,t) {
            this.fk = t
            this.scma = true;
            this.zjId = id;

        },
        download: function (id, type) {
            overy_show()
            $(".down-mask").fadeIn()
            this.$emit("showdownload", id, type)
        },
    },
    template: `<div>
      <musicsc :muid="muId" :video="1"  v-on:muscm="showMessageFromChild" v-if="scm == true"></musicsc>
     <musicpl :zjid="zjId" :type="1" :fk="fk" v-on:muscm="showMessageFromChild" v-if="scma == true"></musicpl>
     
         <div class="overlay" v-if="scm == true || scma" @click="out" style="display: block"></div>
            <div class="new-box">
             <div class="bg-cover" :style="{backgroundImage: 'url(' + detail.cover + ')' }"></div>
			<div class="width1200">
				<dl class="clearfix">
					<dt class="left"><img width="220" height="158" :src="detail.cover"/></dt>
					<dd class="left">
						<h2 class="color_ff">{{detail.className}}</h2>
						<p class="mg_top10">
							<span class="color_b mg_r20">视频：{{detail.videoCount}}部</span>
							<span class="color_b mg_left20">更新时间：{{detail.updateTime|formdata}}</span>
						</p>
						<div class="new-abox mg_top40">
<!--							<a href="javascript:;" class="active"> <img src="img/icon_bf.png" />全部播放</a>-->
<!--							<a href="javascript:;"> <img src="img/icon_sc.png" />收藏</a>-->
<!--							<a @click="changetab(4)"> <img src="img/icon_pl.png" />批量操作</a>-->
						</div>
					</dd>
				</dl>
			</div>
		</div>
    	<div class="bg_ff">
    		<div class="width1200">
    			<h4 class="tittle padding_10 bor_b">
    				<img width="30" class="vertical-align_m mg_r10" :src="detail.cover">
    				<strong class="blue font_16">{{detail.className}} <span class="color_00"></span></strong>
    				<strong class="color_b">video list</strong>
    			</h4>
    			<div id="taoqu" class="taoqu-box clearfix padding_b50 video-boss">
    				<dl class="music-list relative" style="float: left;" v-for="(l,item) in list" :key="item">
					    <router-link :to="'/dvplay?id='+l.id" class="width100 absolute video-bof"><img src="img/taoqi-video.png" alt="" /></router-link>
						<dt class="relative">
						<span class="needpay" v-if="l.need_pay == 1">付费</span>
							<img :src="l.cover">
					     	<div class="absolute muisc-nums">
					     		<p class="left mg_top10"><img src="img/icon-time.png"/>: <span class="color_ff">{{l.times}}</span></p>
					     		<span class="relative select-box  text-center padding_5 right" @click.stop="handelckick" @mouseleave.prevent="handelleave">
				    				<i class="color_ff">￥{{l.gold}}</i>
				    				 <i class="absolute select-list" @mouseleave.prevent="handelleave">
                                        <a @click="zan(l.id)"><img src="img/icon-zan.png">点赞</a>
                                        <a @click="download(l.id,2)"><img src="img/icon-xz.png">下载</a>
                                        <a @click="sc(l.id)"><img src="img/icon-start.png">收藏</a>
                                        <a @click="pla(l.id)"><img src="img/icon-pl.png">评论</a>
                                        <a @click="pla(l.id,1)"><img src="img/icon-fk.png">反馈</a>
                                    </i>
				    			</span>
					     	</div>
						</dt>
						<dd class="padding_10 bg_ff">
							<h4 class="font_16 text ">{{l.videoName}}</h4>
							<p class="clearfix mg_top10">
								<span class="left">{{l.updateTime|formdata}}</span>
								<span class="right">{{l.className}}</span>
							</p>
						</dd>
					</dl>
			
    			</div>
    		    <div class="padding_b50">
			    	 <div class="tcdPageCode mg_top20" id="Dvpage"></div>
			    </div>
    		</div>
    	</div>
</div>
    `
});


//视频播放
var dvplay = Vue.component('dvList-component', {
    data: function () {
        return {
            count: [],
            info: {},
            videoId: this.$route.query.id,
            play: '',
            detail: [],
            tid: this.$route.query.id,
            type: '1',
            scm: false,
            scma: false,
            zjId: 0,
            temp:'',
            fk:'',
            share:false,
            pp:false,
            users:[]

        }
    },
    filters: {
        formdata: function (val) {
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d;
        }
    },
    props:["objtemp"],
    mounted() {
        this.temp = this.objtemp.split("-")[1]
        if($("#Music").length>0){

            if(!$("#Music")[0].paused){
                $("#Music")[0].pause()
                $("#"+this.objtemp).attr("src",'img/icon-zt.png')
                this.$emit('changeplay',false)
                imagePause()

            }
        }
        this.$options.methods.getDv(this)

        // if(type === this.s_type){
        axios.post(sysurl + 'getPlayUrl?videoId=' + this.videoId + '&uid=' + getCookie('uid') + '&tryType=1')
            .then(res => {
                if (res.data.code === 0) {
                    this.play = res.data.data.playUrl
                    $("#myvideo").load()
                } else {

                }
            }, err => {

            })
            .catch((error) => {

            })

        axios.post(sysurl2 + 'user/info')
            .then(res => {
                if (res.data.code === 0) {
                    this.users = res.data.USER;
                } else {

                }
            }, err => {

            })
            .catch((error) => {

            })


        $(".select-box").click(function () {
            $(this).children('.select-list').fadeIn(200);
            $(this).parents(".newuqu-list").siblings().find('.select-list').hide()
            $(this).parents("li").siblings().find('.select-list').hide()
            $(this).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
            $(this).parents(".new-list").siblings().find('.select-list').hide()
            $(this).parents(".clearfix ").siblings().find('.select-list ').hide()
        })
        $(".select-list").mouseleave(function () {
            $(this).fadeOut(200)
        })
        $(".vodeo-yz .select-list").on('click', 'a', function () {
            var text1 = $(this).text()
            console.log(text1)
            $(".yz-text").html(text1)
        })
    },
    methods: {

        getDv: function (obj) {
            var data = {};
            data.id = obj.$route.query.id;
            axios.post(sysurl + 'findVideoId?id=' + data.id)
                .then(res => {
                    if (res.data.code === 0) {
                        obj.info = res.data.data;
                        obj.$options.methods.getClass(obj, res.data.data.secClassId)
                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })
        },
        getClass: function (obj, id) {
            axios.post(sysurl + 'statisticsMusicVideoCount?tableName=v&classId=' + id)
                .then(res => {
                    if (res.data.code === 0) {
                        obj.count = res.data.data;

                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })

        },
        changetype: function (type) {
            var _this = this



            axios.post(sysurl2 + 'user/info')
                .then(res => {
                    if (res.data.code === 0) {
                        if (type === 1) {
                            axios.get(sysurl + 'getPlayUrl?videoId=' + this.videoId + '&uid=' + getCookie('uid') + '&tryType=1')
                                .then(res => {
                                    if (res.data.code === 0) {
                                        // layer.msg(res.data.message,function () {

                                        // })
                                        this.play = res.data.data.playUrl
                                        $("#myvideo").load()
                                    } else {
                                        if (res.data.code == 403) {
                                            // layer.msg(res.data.message,function () {
                                            _this.pp = true
                                            // })
                                        } else {
                                            layer.msg(res.data.message)
                                        }
                                        $(".yz-text").html("普通画质")
                                        return false
                                    }
                                }, err => {

                                })
                                .catch((error) => {

                                })

                        } else {
                            axios.get(sysurl + 'getPlayUrl?videoId=' + this.videoId + '&uid=' + getCookie('uid'))
                                .then(res => {
                                    if (res.data.code === 0) {

                                        layer.msg(res.data.data.msg, function () {
                                            _this.play = res.data.data.playUrl
                                            $("#myvideo").load()
                                            $(".yz-text").html("普通画质")
                                        })

                                    } else {
                                        if (res.data.code == 403) {
                                            // layer.msg(res.data.message,function () {
                                            _this.pp = true
                                            // })
                                        } else {
                                            layer.msg(res.data.message)
                                        }
                                        $(".yz-text").html("普通画质")
                                        return false
                                    }
                                }, err => {

                                })
                                .catch((error) => {

                                })
                        }

                    }else{
                        $(".yz-text").html("普通画质")
                        layer.msg(res.data.message)
                        return false
                    }
                }, err => {

                    })
                .catch((error) => {

                })
                },

        zan: function (id) {
            var uid = getCookie('uid');
            if(uid){
                axios.post(sysurl + 'isZan?videoId=' + id + '&uid=' + uid)
                    .then(res => {
                        if (res.data.code === 0) {
                            if (res.data.data.isZan === 0) {
                                axios.post(sysurl + 'giveZan?videoId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)

                                            this.$options.methods.getDv(this)

                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            } else {
                                axios.post(sysurl + 'cancelZan?videoId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)
                                            this.$options.methods.getDv(this)

                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            }
                            // layer.msg(res.data.message)


                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }else {
                overy_show()
                $(".login-mask").fadeIn()
            }

        },
        sc(id) {
            this.scm = true
            this.muId = id;


        },
        out() {
            this.scm = false
            this.scma = false
            this.pp = false
            $('.login-mask').fadeOut();
        },
        pla(id,t) {
            this.fk = t
            this.scma = true;
            this.zjId = id;

        },
        showMessageFromChild(data) {
            this.scm = data;
            this.scma = data;
            this.$options.methods.getDv(this)
        },
        download: function (id, type) {
            overy_show()
            $(".down-mask").fadeIn()
            this.$emit("showdownload", id, type)
        },
        showshare:function () {
            this.share = !this.share
        }
    },
    template: `
     <div>
     
     <vippay v-if="pp==true" :info="users"></vippay>
            <div class="overlay" style="display: block"  v-if="pp==true" @click="out"></div>
      <musicsc :muid="muId"  :video="1" v-on:muscm="showMessageFromChild" v-if="scm == true"></musicsc>
     <musicpl :zjid="zjId" :type="1" :fk="fk" v-on:muscm="showMessageFromChild" v-if="scma == true"></musicpl>
    <div class="overlay" v-if="scm == true || scma == true" @click="out" style="display: block"></div>
        <div class="new-box">
        <div class="bg-cover" :style="{backgroundImage: 'url(' + info.cover + ')' }"></div>
			<div class="width1200" style="z-index: 1">
				<dl class="clearfix">
					<dt class="left"><img width="220" height="158" :src="info.cover"/></dt>
					<dd class="left">
						<h2 class="color_ff">{{info.videoName}}</h2>
						<p class="mg_top10">
							<span class="color_b mg_r20">播放：{{info.plays}}次</span>
							<span class="color_b mg_left20">更新时间：{{info.updateTime}}</span>
						</p>
						<p class="mg_top10"><span class="color_b mg_r20">简介：{{count.des}}</span></p>
						<div class="new-abox mg_top40">
							<div class="relative select-box  text-center padding_5 mui-h6 left vodeo-yz"style="margin: 0 10px 0 0!important;padding: 6px;">
			    				<i class="color_ff yz-text">普通画质</i>
			    				<p class="absolute select-list">
			    					<a @click="changetype(1)">普通画质</a>
			    					<a @click="changetype()">高清画质</a>
			    				</p>
			    			</div>
							<span class="relative select-box  text-center" style="margin: 0!important;padding: 6px;">
			    				<i class="color_ff">￥{{info.gold}}</i>
			    				<i class="absolute select-list">
                                                  	<a @click="zan(info.id)"><img src="img/icon-zan.png">点赞</a>
                                                    <a @click="download(info.id,2)"><img src="img/icon-xz.png">下载</a>
                                                    <a @click="sc(info.id)"><img src="img/icon-start.png">收藏</a>
                                                    <a @click="pla(info.id)"><img src="img/icon-pl.png">评论</a>
                                                    <a @click="pla(info.id,1)"><img src="img/icon-fk.png">反馈</a>
			    			   </i> 
			    			</span>
							<!--<a href="javascript:;" class="active"> <img src="img/icon_bf.png" />播放</a>-->
							<a @click="download(info.id,2)" class="mg_left20"> <img src="img/icon-xz1.png" />下载</a>

							<!--<a href="javascript:;"> <img src="img/icon_pl.png" />批量操作</a>-->
						</div>
					</dd>
				</dl>
			</div>
		</div>
    	<div class="bg_ff">
    		<div class="width1200">
    			<h4 class="tittle padding_tb20 bor_b">
    				<strong class="padding_10 font_16">{{info.videoName}}</strong>
    			</h4>
    			<div class="main  mg_tb20 list-box">
    				<div class="main-right left " style="width: 100%">
    					<div class="">
    						<video width="100%" height="500"  controls="controls" muted :poster="info.cover" autoplay="autoplay" id="myvideo">
    							<source :src="play" type="video/mp4"></source>
<!--    							<source src="myvideo.ogv" type="video/ogg"></source>-->
<!--    							<source src="myvideo.webm" type="video/webm"></source>-->
<!--    							<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">-->
<!--    								<param name="movie" value="myvideo.swf" />-->
<!--    								<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />-->
<!--    							</object>-->
<!--    							当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>-->
    						</video>
    					</div> 
    					<div class="good-abox mg_top20 mg_b20 vodeo-yz">
    						<a @click="zan(info.id)">点赞({{info.zan}})</a>
    						<a @click="sc(info.id)">收藏({{info.collections}})</a>
    						<a @click="showshare">分享</a>
    						<a @click="pla(info.id,1)">反馈</a>
<div class="bshare-custom" style="float: right" v-show="share"><a title="分享到QQ空间" class="bshare-qzone"></a><a title="分享到新浪微博" class="bshare-sinaminiblog"></a><a title="分享到人人网" class="bshare-renren"></a><a title="分享到腾讯微博" class="bshare-qqmb"></a><a title="分享到网易微博" class="bshare-neteasemb"></a><a title="更多平台" class="bshare-more bshare-more-icon more-style-addthis"></a><span class="BSHARE_COUNT bshare-share-count">0</span></div>

    					</div>
    				    <pinglun-component :tid="tid" :type="type"></pinglun-component>
    				</div>
<!--    				<div class="main-left right">-->
<!--    					<div class="padding_10">-->
<!--    						<dl class="">-->
<!--	    						<dt><img class="width100" :src="info.cover"/></dt>-->
<!--	    						<dd>-->
<!--	    							<h4 class="font_16">MV简介</h4>-->
<!--	    							<p class="mg_top10">发布时间：{{info.updateTime|formdata}}</p>-->
<!--	    							<p class="mg_top10">播放次数：{{info.plays}}</p>-->
<!--	    							<p class="mg_top10">分类：{{info.className}}</p>-->
<!--	    						</dd>-->
<!--	    					</dl>-->
<!--    					</div>-->

<!--    				</div>-->
    			</div>

    		</div>
    	</div>
</div>
    `
});

//download
Vue.component('download-component', {
    data: function () {
        return {
            count: 0,
        }
    },
    mounted() {
        $(function () {
            $(".tcdPageCode").createPage({
                pageCount: 30,
                current: 1,
                backFn: function (p) {
                    //console.log(p);
                }
            });

        })
        $(".select-box").click(function () {
            $(this).children('.select-list').fadeIn(200);
            $(this).parents(".newuqu-list").siblings().find('.select-list').hide()
            $(this).parents("li").siblings().find('.select-list').hide()
            $(this).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
            $(this).parents(".new-list").siblings().find('.select-list').hide()
            $(this).parents(".clearfix ").siblings().find('.select-list ').hide()
        })
        $(".select-list").mouseleave(function () {
            $(this).fadeOut(200)
        })

        //单选
        $(".check-box input").click(function () {
            var check = $(this).is(':checked');
            if (check == true) {
                $(this).siblings().find('img').attr("src", 'img/check-checked.png')
            } else {
                $(this).siblings().find('img').attr("src", 'img/check.png')
            }
        })
        $(".check-box input.allcheck").click(function () {
            var check = $(this).is(':checked');
            if (check == true) {
                $(".spun-box").find(".check-box").find('img').attr("src", 'img/check-checked.png')
                $(".spun-box").find(".check-box").find('input').attr("checked", true)
            } else {
                $(".spun-box").find(".check-box").find('img').attr("src", 'img/check.png')
                $(".spun-box").find(".check-box").find('input').attr("checked", false)
            }

        })

    },
    methods: {
        changetab: function (type) {
            this.$emit("changetab", type);
        }
    },
    template: `
    <div>
    	<div class="new-box">
			<div class="width1200">
				<dl class="clearfix">
					<dt class="left"><img width="220" src="img/new-img.png"/></dt>
					<dd class="left">
						<h2 class="color_ff">Jackie Chan</h2>
						<p class="mg_top10">
							<span class="color_b mg_r20">歌曲：1000首</span>
							<span class="color_b mg_left20">更新时间：2018-10-10</span>
						</p>
						<div class="new-abox mg_top40">
							<a href="javascript:;" class="active"> <img src="img/icon_bf.png" />播放</a>
							<a href="javascript:;"> <img src="img/icon_sc.png" />收藏</a>
							<a href="javascript:history.back(-1)"> 取消批量操作</a>
							<a href="javascript:;"> <img src="img/icon-xz1.png" />下载</a>
						</div>
					</dd>
				</dl>
			</div>
		</div>
    	<div class="bg_ff">
    		<div class="width1200 clearfix">
    			<h4 class="tittle padding_10 bor_b">
    				<img width="30" class="vertical-align_m mg_r10" src="img/index-tittleimg.png">
    				<strong class="blue font_16">HIP <span class="color_00">HOP</span></strong>
    				<strong class="color_b">hip hop</strong>
    			</h4>
    			<div class="padding_tb20 new-wuqu-list">
    				<div class="clearfix bg_b">
		    			<p class="left mg_top10">
		    				<span class="check-box left " style="margin-left: 5px;">
				    			<label for="checkbox"><img src="img/check.png"/></label>
				    			<input type="checkbox" name="checkbox1" id="checkbox" class="allcheck" hidden="hidden" value="" />
				    		</span>
			    			<span class="text name" style="margin-left:122px ;">歌曲</span>
			    		</p>
			    		<p class="right">
		    		    	<span>时长 </span>
		    		    	<span>类型</span>
			    			<span>BPM</span>
			    			<span> KEY </span>
			    			<span style="margin-right: 130px;">更新日期</span>
		    		    </p>
		    	   </div>
					<div class="clearfix  active new-list spun-box">
		    			<p class="left mg_top5">
		    				<span class="check-box left mg_top10">
				    			<label for="checkbox1"><img src="img/check.png"/></label>
				    			<input type="checkbox" name="checkbox1" id="checkbox1" class="check" hidden="hidden" value="" />
				    		</span>
		    				<span><img width="40" height="40" class="bor_r5 vertical-align_m" src="img/new-small.png"></span>
			    			<span><img class="vertical-align_m" src="img/icon-zt.png"></span>
			    			<span class="text name">Original Mix</span>
			    		</p>
			    		<div class="right">
			    			<span>03:22</span>
				    			<span>舞曲</span>
				    			<span>124</span>
				    			<span>1A</span>
				    			<span>2018-11-21</span>
			    			<span class="relative select-box  text-center padding_5">
			    				<i class="color_ff">￥2.00</i>
			    				<i class="absolute select-list">
			    					<a href="javascript:;"><img src="img/icon-zan.png">点赞</a>
			    					<a href="javascript:;"><img src="img/icon-xz.png">下载</a>
			    					<a href="javascript:;"><img src="img/icon-start.png">收藏</a>
			    					<a href="javascript:;"><img src="img/icon-pl.png">评论</a>
			    					<a href="javascript:;"><img src="img/icon-fk.png">反馈</a>
			    				</i>
			    			</span>
			    		</div>
		    	    </div>
			    	<div class="clearfix new-list spun-box">
		    			<p class="left mg_top5">
		    				<span class="check-box left mg_top10">
				    			<label for="checkbox2"><img src="img/check.png"/></label>
				    			<input type="checkbox" name="checkbox" id="checkbox2" class="check" hidden="hidden" value="" />
				    		</span>
		    				<span><img width="40" height="40" class="bor_r5 vertical-align_m" src="img/new-small.png"></span>
			    			<span><img class="vertical-align_m" src="img/icon-zt.png"></span>
			    			<span class="text name">Original Mix</span>
			    		</p>
			    		<div class="right">
			    			<span>03:22</span>
				    			<span>舞曲</span>
				    			<span>124</span>
				    			<span>1A</span>
				    			<span>2018-11-21</span>
			    			<span class="relative select-box  text-center padding_5">
			    				<i class="color_ff">￥2.00</i>
			    				<i class="absolute select-list">
			    					<a href="javascript:;"><img src="img/icon-zan.png">点赞</a>
			    					<a href="javascript:;"><img src="img/icon-xz.png">下载</a>
			    					<a href="javascript:;"><img src="img/icon-start.png">收藏</a>
			    					<a href="javascript:;"><img src="img/icon-pl.png">评论</a>
			    					<a href="javascript:;"><img src="img/icon-fk.png">反馈</a>
			    				</i>
			    			</span>
			    		</div>
		    	   </div>
			    	<div class="clearfix new-list spun-box">
		    			<p class="left mg_top5">
		    				<span class="check-box left mg_top10">
				    			<label for="checkbox3"><img src="img/check.png"/></label>
				    			<input type="checkbox" name="checkbox1" id="checkbox3" class="check" hidden="hidden" value="" />
				    		</span>
		    				<span><img width="40" height="40" class="bor_r5 vertical-align_m" src="img/new-small.png"></span>
			    			<span><img class="vertical-align_m" src="img/icon-zt.png"></span>
			    			<span class="text name">Original Mix</span>
			    		</p>
			    		<div class="right">
			    		<span>03:22</span>
				    			<span>舞曲</span>
				    			<span>124</span>
				    			<span>1A</span>
				    			<span>2018-11-21</span>
			    			<span class="relative select-box  text-center padding_5">
			    				<i class="color_ff">￥2.00</i>
			    				<i class="absolute select-list">
			    					<a href="javascript:;"><img src="img/icon-zan.png">点赞</a>
			    					<a href="javascript:;"><img src="img/icon-xz.png">下载</a>
			    					<a href="javascript:;"><img src="img/icon-start.png">收藏</a>
			    					<a href="javascript:;"><img src="img/icon-pl.png">评论</a>
			    					<a href="javascript:;"><img src="img/icon-fk.png">反馈</a>
			    				</i>
			    			</span>
			    		</div>
		    	    </div>
			    	<div class="clearfix new-list spun-box">
		    			<p class="left mg_top5">
		    				<span class="check-box left mg_top10">
				    			<label for="checkbox4"><img src="img/check.png"/></label>
				    			<input type="checkbox" name="checkbox1" id="checkbox4" class="check" hidden="hidden" value="" />
				    		</span>
		    				<span><img width="40" height="40" class="bor_r5 vertical-align_m" src="img/new-small.png"></span>
			    			<span><img class="vertical-align_m" src="img/icon-zt.png"></span>
			    			<span class="text name">Original Mix</span>
			    		</p>
			    		<div class="right">
			    		<span>03:22</span>
				    			<span>舞曲</span>
				    			<span>124</span>
				    			<span>1A</span>
				    			<span>2018-11-21</span>
			    			<span class="relative select-box  text-center padding_5">
			    				<i class="color_ff">￥2.00</i>
			    				<i class="absolute select-list">
			    					<a href="javascript:;"><img src="img/icon-zan.png">点赞</a>
			    					<a href="javascript:;"><img src="img/icon-xz.png">下载</a>
			    					<a href="javascript:;"><img src="img/icon-start.png">收藏</a>
			    					<a href="javascript:;"><img src="img/icon-pl.png">评论</a>
			    					<a href="javascript:;"><img src="img/icon-fk.png">反馈</a>
			    				</i>
			    			</span>
			    		</div>
		    	    </div>
		    	    <div class="clearfix new-list spun-box">
		    			<p class="left mg_top5">
		    				<span class="check-box left mg_top10">
				    			<label for="checkbox5"><img src="img/check.png"/></label>
				    			<input type="checkbox" name="checkbox1" id="checkbox5" class="check" hidden="hidden" value="" />
				    		</span>
		    				<span><img width="40" height="40" class="bor_r5 vertical-align_m" src="img/new-small.png"></span>
			    			<span><img class="vertical-align_m" src="img/icon-zt.png"></span>
			    			<span class="text name">Original Mix</span>
			    		</p>
			    		<div class="right">
			    			<span>03:22</span>
				    			<span>舞曲</span>
				    			<span>124</span>
				    			<span>1A</span>
				    			<span>2018-11-21</span>
			    			<span class="relative select-box  text-center padding_5">
			    				<i class="color_ff">￥2.00</i>
			    				<i class="absolute select-list">
			    					<a href="javascript:;"><img src="img/icon-zan.png">点赞</a>
			    					<a href="javascript:;"><img src="img/icon-xz.png">下载</a>
			    					<a href="javascript:;"><img src="img/icon-start.png">收藏</a>
			    					<a href="javascript:;"><img src="img/icon-pl.png">评论</a>
			    					<a href="javascript:;"><img src="img/icon-fk.png">反馈</a>
			    				</i>
			    			</span>
			    		</div>
		    	    </div>
		    	    <div class="clearfix new-list spun-box">
		    			<p class="left mg_top5">
		    				<span class="check-box left mg_top10">
				    			<label for="checkbox6"><img src="img/check.png"/></label>
				    			<input type="checkbox" name="checkbox1" id="checkbox6" class="check" hidden="hidden" value="" />
				    		</span>
		    				<span><img width="40" height="40" class="bor_r5 vertical-align_m" src="img/new-small.png"></span>
			    			<span><img class="vertical-align_m" src="img/icon-zt.png"></span>
			    			<span class="text name">Original Mix</span>
			    		</p>
			    		<div class="right">
			    			<span>03:22</span>
			    			<span>舞曲</span>
			    			<span>124</span>
			    			<span>1A</span>
			    			<span>2018-11-21</span>
			    			<span class="relative select-box  text-center padding_5">
			    				<i class="color_ff">￥2.00</i>
			    				<i class="absolute select-list">
			    					<a href="javascript:;"><img src="img/icon-zan.png">点赞</a>
			    					<a href="javascript:;"><img src="img/icon-xz.png">下载</a>
			    					<a href="javascript:;"><img src="img/icon-start.png">收藏</a>
			    					<a href="javascript:;"><img src="img/icon-pl.png">评论</a>
			    					<a href="javascript:;"><img src="img/icon-fk.png">反馈</a>
			    				</i>
			    			</span>
			    		</div>
		    	    </div>
    		    </div>
    		    <div class="padding_b50 ">
			    	<div class="tcdPageCode mg_top20"></div>
			    </div>
    		</div>
    	</div>
</div>
    `
});


//song-spu

var spu = Vue.component('spu-component', {
    data: function () {
        return {
            count: 0,
            list: [],
            detail: [],
            muId: 0,
            scm: false,
        }
    },
    filters: {
        formdata: function (val) {
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d;
        }
    },
    watch: {

        '$route': function (val, oldval) {
            this.$options.methods.getDetail(this, 1)
        }
    },
    mounted() {
        this.$options.methods.getDetail(this, 1)

    },
    methods: {

        getDetail: function (obj, currentPage) {

            var formdata = new FormData();
            // formdata.append("parentId",0)
            formdata.append("sub", 1)
            formdata.append("currentPage", currentPage)
            formdata.append("showCount", 10)
            formdata.append("queryCode", obj.$route.query.queryCode)


            axios.post(sysurl + 'findQueryCodeMusicList', formdata)
                .then(res => {
                    if (res.data.code === 0) {
                        obj.list = res.data.data.list;
                        $(".tcdPageCode").createPage({
                            pageCount: res.data.data.totalPage,
                            current: res.data.data.currentPage,
                            backFn: function (p) {
                                obj.$options.methods.getDetail(obj, p)
                            }
                        });

                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })

            axios.post(sysurl + 'findClassCode?id=' + obj.$route.query.classId)
                .then(res => {
                    if (res.data.code === 0) {

                        obj.detail = res.data.data;


                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })
        },
        changetab: function (type) {
            this.$emit("changetab", type);
        },
        handelckick: function (e) {

            $(e.target).children('.select-list').fadeIn(100);
            $(e.target).parents(".newuqu-list").siblings().find('.select-list').hide()
            $(e.target).parents("li").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
            $(e.target).parents(".new-list").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix ").siblings().find('.select-list ').hide()
        },
        handelleave: function (e) {
            $(e.target).fadeOut(200)
        },
        zan: function (id) {
            var uid = getCookie('uid');
            if(uid){
                axios.post(sysurl + 'isZan?musicId=' + id + '&uid=' + uid)
                    .then(res => {
                        if (res.data.code === 0) {
                            if (res.data.data.isZan === 0) {
                                axios.post(sysurl + 'giveZan?musicId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            } else {
                                axios.post(sysurl + 'cancelZan?musicId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            }
                            // layer.msg(res.data.message)


                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }else {
                overy_show()
                $(".login-mask").fadeIn()
            }

        },
        sc(id) {
            this.scm = true
            this.muId = id;

        },
        out() {
            this.scm = false
            $('.login-mask').fadeOut();
        },
        showMessageFromChild(data) {
            this.scm = data
        }
    },
    template: `
   <div>
    <musicsc :muid="muId" :video="0" v-on:muscm="showMessageFromChild" v-if="scm == true"></musicsc>
    
    <div class="overlay" v-if="scm == true" @click="out" style="display: block"></div>
    		<div class="new-box">
			<div class="width1200">
				<dl class="clearfix">
					<dt class="left"><img width="220" src="img/new-img.png"/></dt>
					<dd class="left">
						<h2 class="color_ff">{{detail.className}}</h2>
						<p class="mg_top10">
							<span class="color_b mg_r20">歌曲：{{detail.musicCount}}首</span>
							<span class="color_b mg_left20">更新时间：{{detail.created|formdata}}</span>
						</p>
						<div class="new-abox mg_top40">
							<a href="javascript:;" class="active"> <img src="img/icon_bf.png" />全部播放</a>
							<a href="javascript:;"> <img src="img/icon_sc.png" />收藏</a>
							<a href="song-download.html"> <img src="img/icon_pl.png" />批量操作</a>
						</div>
					</dd>
				</dl>
			</div>
		</div>
    	<div class="bg_ff">
    		<div class="width1200 clearfix">
    			<h4 class="tittle padding_10 bor_b">
    				<img width="30" class="vertical-align_m mg_r10" src="img/index-tittleimg.png">
    				<strong class="blue font_16">{{detail.className}} </strong>
    				<strong class="color_b">music list</strong>
    			</h4>
    			<div class="padding_tb20 new-wuqu-list">
    				<div class="clearfix bg_b padding_10">
		    			<p class="left">
			    			<span style="margin-left: 76px;">歌名</span>
		    		    </p>
		    		    <p class="right">
		    		    	<span>时长 </span>
			    			<span>BPM</span>
			    			<span> KEY </span>
			    			<span style="margin-right: 130px;">更新日期</span>
		    		    </p>
		    		</div>
					<div class="clearfix  active new-list" v-for="(l,item) in list" :key="item">
		    			<p class="left">
			    			<span><img width="40" height="40" class="bor_r5 vertical-align_m" :src="l.cover"></span>
			    			<span>
			    			    <img class="vertical-align_m" src="img/icon-zt.png">
<!--		    			    <img class="vertical-align_m" src="img/icon-bf.png">-->
			    			</span>
			    			<span class="text name">{{l.albumName}}</span>
			    		</p>
			    		<div class="right">
			    			<span>{{l.times}}</span>

				    			<span>{{l.speed}}</span>
				    			<span>{{l.tone}}</span>
				    			<span>{{l.updateTime|formdata}}</span>
			    			<span class="relative select-box  text-center padding_5" @click.stop="handelckick">
			    				<i class="color_ff" >￥{{l.gold}}</i>
			    				<i class="absolute select-list" @mouseleave.prevent="handelleave">
			    					<a @click="zan(l.id)"><img src="img/icon-zan.png">点赞</a>
			    					<a href="javascript:;"><img src="img/icon-xz.png">下载</a>
			    					<a @click="sc(l.id)"><img src="img/icon-start.png">收藏</a>
			    					<a href="javascript:;"><img src="img/icon-pl.png">评论</a>
			    					<a href="javascript:;"><img src="img/icon-fk.png">反馈</a>
			    				</i>
			    			</span>
			    		</div>
		    		</div>
		    
    		   </div>
    			<div class="padding_b50 ">
			    	<div class="tcdPageCode mg_top20"></div>
			    </div>
    		</div>
    	</div>
</div>
    `
});

//套曲
var taoqu = Vue.component('taoqu-component', {
    data: function () {
        return {
            count: 0,
            list: [],
            detail: [],
            muId: 0,
            scm: false,
            scma: false,
            zjId: 0,
            today:''

        }
    },
    filters: {
        formdata: function (val) {
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d;
        }
    },
    watch: {

        '$route': function (val, oldval) {
            this.$options.methods.getDetail(this, 1)
        }
    },
    mounted() {

        this.$options.methods.getDetail(this, 1)

        let date = new Date();
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        this.today = y.toString() + '-' + MM + '-' + d

    },
    methods: {
        getnewdata: function (obj, currentPage, v, dd) {
            var form = new FormData();
            form.append("secClassId", dd[v].id)
            form.append("showCount", 8)
            form.append("currentPage", 1)
            axios.post(sysurl + 'findClassIdGetAlbumLis', form)
                .then(resq => {
                    if (resq.data.code === 0) {
                        // obj.list = res.data.data.list;
                        dd[v].childList = resq.data.data.list
                        obj.list = dd


                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })
        },
        getDetail: function (obj, currentPage) {

            var formdata = new FormData();
            // formdata.append("parentId",0)
            formdata.append("parentId", obj.$route.query.classId)
            formdata.append("sub", 1)
            axios.post(sysurl + 'findClassByParentId', formdata)
                .then(res => {
                    if (res.data.code === 0) {
                        for (v in res.data.data) {
                            obj.$options.methods.getnewdata(obj, 1, v, res.data.data)

                        }

                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })

            axios.post(sysurl + 'findClassByCodeOrId?classId=' + obj.$route.query.classId + '&stsCount=1')
                .then(res => {
                    if (res.data.code === 0) {

                        obj.detail = res.data.data;


                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })
        },

    },
    template: `
   <div>
    	  <banner-component :type="5"></banner-component>

    	<div class="bg_ff">
    		<div class="width1200 padding_b50" v-for="(l,item) in list" :key="item">
    			<h4 class="tittle padding_10 bor_b clearfix padding_t50">
	    			<span class="left">
	    				<img width="30" class="vertical-align_m mg_r10" :src="l.cover">
	    				<strong class="blue font_16">{{l.className}} <span class="color_00"></span></strong>
	    				<strong class="color_b">Album</strong>
	    			</span>
    				<router-link :to="'/taoList?classId='+l.id" class="right blue">查看更多&gt;&gt;  </router-link>
    			</h4>
    			<div id="taoqu" class="taoqu-box clearfix">
    				<dl class="music-list relative" style="float: left;" v-for="(c,index) in l.childList">
    			
						<router-link :to="'taoquDetail?id='+c.id" class="width100">
							<dt class="relative">
								<span class="needpay" v-if="c.is_pay == 1">付费</span>
    				<span class="needpay" v-if="c.is_pay == 2">VIP下载</span>
							<img :src="c.cover">
							<p class="absolute muisc-nums">歌曲数量: <span class="blue">{{c.musicCount}}</span></p></dt>
							<dd class="padding_10 bg_ff">
								<h4 class="font_16 text"> {{c.name}}</h4>
								<p class="clearfix mg_top10">
									<span class="left" :class="{'red':c.last_edit_time==today,'':c.last_edit_time!=today}">最后更新日期：{{c.last_edit_time}}</span>
									<span class="right">{{c.typeName}}</span>
								</p>
							</dd>
						</router-link>
					</dl>
					
    			</div>
    		</div>
    	

    	</div>
</div>
    `
});

//套曲列表
var taoList = Vue.component('taoquList-component', {
    data: function () {
        return {
            count: 0,
            list: [],
            detail: [],
            child: '',
            typeId:'',
            today:''
        }
    },
    filters: {
        formdata: function (val) {
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d;
        }
    },
    watch: {

        '$route': function (val, oldval) {
            this.$options.methods.getDetail(this, 1)
        }
    },
    mounted() {

        this.$options.methods.getDetail(this, 1)
        let date = new Date();
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        this.today = y.toString() + '-' + MM + '-' + d

    },
    methods: {
        getDetail: function (obj, currentPage,typeid) {
            var form = new FormData();
            form.append("secClassId", obj.$route.query.classId)
            form.append("showCount", 10)
            form.append("currentPage", 1)
            if(obj.typeId!=''&&obj.typeId!=undefined){
                form.append("typeId", obj.typeId)
            }

            axios.post(sysurl + 'findClassIdGetAlbumLis', form)
                .then(res => {
                    if (res.data.code === 0) {
                        obj.list = res.data.data.list


                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })


            axios.post(sysurl + 'findClassByCodeOrId?classId=' + obj.$route.query.classId + '&stsCount=1&sub=1')
                .then(res => {
                    if (res.data.code === 0) {

                        obj.detail = res.data.data;
                        // obj.child = res.data.data.childList;


                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })

            axios.post(sysurl + 'getAlbumTypeList')
                .then(res => {
                    if (res.data.code === 0) {

                        obj.child = res.data.data.list;


                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })
        },
        getlist:function (id) {
            this.typeId = id
            this.$options.methods.getDetail(this, 1)
            $(".classify-box a").removeClass("active")
            $(event.target).addClass("active")
        },
        getalllist:function () {
            this.typeId = ''
            this.$options.methods.getDetail(this, 1)
            $(".classify-box a").removeClass("active")
            $(event.target).addClass("active")
        }
    },
    template: `
    <div>
    		<banner-component :type="5"></banner-component>

    	<div class="bg_ff">
    		<div class="width1200 ">
    			<h4 class="tittle padding_10 bor_b clearfix padding_t50">
	    			<p class="">
	    				<img width="30" class="vertical-align_m mg_r10" :src="detail.cover">
	    				<strong class="blue font_16">{{detail.className}} <span class="color_00"></span></strong>
	    				<strong class="color_b">Album list</strong>
	    			</p>
    			    <p class="classify-box ">
    			    	<span>类型选择：</span>
    			    	<a href="javascript:;"class="active" id='' @click="getalllist">全部丨</a>

    			    	<a href="javascript:;" v-for="(cc,item) in child" :key="item"  @click="getlist(cc.typeId)">{{cc.typeName}}丨</a>
    			    	
    			    </p>
    			</h4>

    			<div id="taoqu" class="taoqu-box clearfix padding_b50">
    				<dl class="music-list relative" style="float: left" v-for="(l,item) in list" :key="item">
						<router-link :to="'taoquDetail?id='+l.id" class="width100">
							<dt class="relative">
								<span class="needpay" v-if="l.is_pay == 1">付费</span>
    				            <span class="needpay" v-if="l.is_pay == 2">VIP下载</span>
							<img :src="l.cover"><p class="absolute muisc-nums">歌曲数量: <span class="blue">{{l.musicCount}}</span></p></dt>
							<dd class="padding_10 bg_ff">
								<h4 class="font_16 text"> {{l.name}}</h4>
								<p class="clearfix mg_top10">
									<span class="left" :class="{'red':l.last_edit_time==today,'':l.last_edit_time!=today}">最后更新时间：{{l.last_edit_time}}</span>
									<span class="right">{{l.typeName}}</span>
								</p>
							</dd>
						</router-link>
					</dl>
			
    			</div>
    		    <div class="padding_b50">
			    	 <div class="tcdPageCode mg_top20"></div>
			    </div>
    		</div>

    	</div>
</div>
    `
});

//套曲详情
var taoquDetail = Vue.component('taoquDetail-component', {
    data: function () {
        return {
            count: 0,
            detail: [],
            list: [],
            muId: 0,
            scm: false,
            scma: false,
            zjId: 0,
            tid: this.$route.query.id,
            type: '4',
            checksta: false,
            downloadtype: 1,
            songId:this.$route.query.id,
            all:true,
            mtype:'2',
            fk:'',
        }
    },
    filters: {
        formdata: function (val) {
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d;
        }
    },
    watch: {

        '$route': function (val, oldval) {
            this.$options.methods.getDetail(this, 1)
        }
    },
    mounted() {
        var _this = this

        var formdata = new FormData();
        // formdata.append("parentId",0)
        // formdata.append("sub", 1)
        formdata.append("currentPage", 1)
        formdata.append("showCount", 10)
        formdata.append("albumId", _this.$route.query.id)
        axios.post(sysurl + 'findIdGetMusicList', formdata)
            .then(res => {
                if (res.data.code === 0) {
                    _this.list = res.data.data.list;
                    $("#taoqupage").createPage({
                        pageCount: res.data.data.totalPage * 1,
                        current: res.data.data.currentPage * 1,
                        backFn: function (p) {
                            _this.$options.methods.getDetails(_this, p)
                        }
                    })

                } else {

                }
            }, err => {

            })
            .catch((error) => {

            })


        axios.post(sysurl + 'findAlbumId?id=' + this.$route.query.id + '&stsCount=1')
            .then(res => {
                if (res.data.code === 0) {

                    this.detail = res.data.data;


                } else {

                }
            }, err => {

            })
            .catch((error) => {

            })

    },
    methods: {
        getDetails: function (obj, currentPage) {
            var formdata = new FormData();
            // formdata.append("parentId",0)
            formdata.append("sub", 1)
            formdata.append("currentPage", currentPage)
            formdata.append("showCount", 10)
            formdata.append("albumId", obj.$route.query.id)


            axios.post(sysurl + 'findIdGetMusicList', formdata)
                .then(res => {
                    if (res.data.code === 0) {
                        obj.list = res.data.data.list;


                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })
        },


        getDetail: function (obj, currentPage) {

            var formdata = new FormData();
            // formdata.append("parentId",0)
            // formdata.append("sub", 1)
            formdata.append("currentPage", currentPage)
            formdata.append("showCount", 10)
            formdata.append("albumId", obj.$route.query.id)
            axios.post(sysurl + 'findIdGetMusicList', formdata)
                .then(res => {
                    if (res.data.code === 0) {
                        obj.list = res.data.data.list;


                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })






        },
        handelckick: function (e) {

            $(e.target).children('.select-list').fadeIn(100);
            $(e.target).parents(".newuqu-list").siblings().find('.select-list').hide()
            $(e.target).parents("li").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
            $(e.target).parents(".new-list").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix ").siblings().find('.select-list ').hide()
        },
        handelleave: function (e) {
            $(e.target).fadeOut(200)
        },
        zan: function (id) {
            var uid = getCookie('uid');
            if(uid){
                axios.post(sysurl + 'isZan?musicId=' + id + '&uid=' + uid)
                    .then(res => {
                        if (res.data.code === 0) {
                            if (res.data.data.isZan === 0) {
                                axios.post(sysurl + 'giveZan?musicId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            } else {
                                axios.post(sysurl + 'cancelZan?musicId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            }
                            // layer.msg(res.data.message)


                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }else {
                overy_show()
                $(".login-mask").fadeIn()
            }

        },
        sc(id,type) {
            this.scm = true
            this.muId = id;
            this.mtype = type

        },
        out() {
            this.scm = false
            this.scma = false
            $('.login-mask').fadeOut();
        },
        showMessageFromChild(data) {
            this.scm = data
            this.scma = data
        },
        pla(id,t) {
            this.fk = t
            this.scma = true;
            this.zjId = id;

        },
        download: function (id, type) {
            overy_show()
            $(".down-mask").fadeIn()
            this.$emit("showdownload", id, type)
        },

        playMusic: function (id) {
            this.$emit("music", id, event.target)
        },
        todetail: function (id) {
            // this.$router.push({path: '/musicList', query: {id: id}})
        },

        checkstatus: function (d) {
            this.list[d].ischeck = !this.list[d].ischeck
        },
        changesta: function () {
            this.checksta = !this.checksta

        },
        //批量下载
        downloadmore: function () {
            var obj = this
            var arr = []
            for (i in this.list) {
                if (this.list[i].ischeck) {
                    arr.push(this.list[i].maskCode)
                }
            }

            if (arr.length == 0) {
                layer.msg("请先选择要下载的歌曲！")
                return false
            }
            arr.join(",")
            var formdata = new FormData()
            formdata.append("musicMaskCodes", arr)

            axios.post(sysurl + 'getBatchDownloadPower', formdata)
                .then(res => {
                    if (res.data.code === 0) {
                        // console.log(res.data.data);
                        // this.$options.methods.downloadlist(res.data.data)
                        for (l in res.data.data) {

                            obj.$options.methods.downloadlist(res.data.data[l])

                        }

                    } else if (res.data.code === -2) {

                        layer.confirm(res.data.data.msg, {btn: ["继续", "取消"]}, function (index) {
                            if (obj.downloadtype == 1) {
                                formdata.append(res.data.data.parameter, 1)
                                // url = sysurl + 'getBatchDownloadPower?'+obj.MaskCodeName+'='+obj.MaskCode+'&'+res.data.data.parameter+'=1'
                            } else {
                                url = sysurl + 'getBatchDownloadPower?videoId=' + obj.downloadid + '&' + obj.MaskCodeName + '=' + obj.MaskCode + '&' + res.data.data.parameter + '=1'
                            }
                            axios.post(sysurl + 'getBatchDownloadPower', formdata)
                                .then(resq => {
                                    layer.close(index)
                                    if (resq.data.code === 0) {
                                        // obj.$options.methods.downloadlist(res.data.data)
                                        for (d in resq.data.data) {

                                            obj.$options.methods.downloadlist(resq.data.data[d])

                                        }

                                    } else {
                                        // layer.msg(res.data.message)


                                    }
                                }, err => {

                                })
                                .catch((error) => {

                                })


                        }, function (index) {
                            layer.close(index)
                        })

                    } else {
                        layer.msg(res.data.message)
                    }
                }, err => {

                })
                .catch((error) => {

                })

        },
        downloadlist: function (list) {

            const iframe = document.createElement("iframe");
            iframe.style.display = "none"; // 防止影响页面
            iframe.style.height = 0; // 防止影响页面
            iframe.src = list;
            document.body.appendChild(iframe);
            // 这一行必须，iframe挂在到dom树上才会发请求
            // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
            setTimeout(() => {
                iframe.remove();
            }, 5 * 60 * 1000);

        },
        checkall:function (type) {

            if(type == 1){
                for( s in this.list){
                    this.list[s].ischeck = true
                }

            }
            else{
                for( s in this.list){
                    this.list[s].ischeck = false
                }
            }
            this.all = !this.all
        },
        allplay:function () {
            if($("#all"+this.songId).length>0){
                $($("#all"+this.songId)[0]).find(".vertical-align_m").click()

            }
        }
    },
    template: `
    <div>
      <musicsc :muid="muId" :video="mtype"  v-on:muscm="showMessageFromChild" v-if="scm == true"></musicsc>
     <musicpl :zjid="zjId" :type="2" :fk="fk" v-on:muscm="showMessageFromChild" v-if="scma == true"></musicpl>
    
         <div class="overlay" v-if="scm == true || scma" @click="out" style="display: block"></div>
    			<div class="new-box">
    			         <div class="bg-cover" :style="{backgroundImage: 'url(' + detail.cover + ')' }"></div>

			<div class="width1200">
				<dl class="clearfix">
					<dt class="left"><img width="220" height="158" :src="detail.cover"/></dt>
					<dd class="left">
						<h2 class="color_ff">{{detail.name}}</h2>
						<p class="mg_top10">
							<span class="color_b mg_r20">歌曲：{{detail.musicCount}}首</span>
							<span class="color_b mg_left20">更新时间：{{detail.last_edit_time|formdata}}</span>
						</p>
                        <p class="mg_top10">
							<span class="color_b mg_r20">简介：{{detail.describle}}</span>
						</p>
						<div class="new-abox mg_top40">
							<a @click="allplay" class="active"> <img src="img/icon_bf.png" />全部播放</a>
							<a @click="sc(tid,4)" v-if="detail.secClassName != '音乐人'"> <img src="img/icon_sc.png" />收藏</a>
							<a @click="sc(tid,2)" v-if="detail.secClassName == '音乐人'"> <img src="img/icon_sc.png" />收藏</a>
							<a @click="changesta" v-if="!checksta"> <img src="img/icon_pl.png" />批量操作</a>
							<a @click="changesta" v-if="checksta">取消批量操作</a>
							<a @click="downloadmore" v-if="checksta"> <img src="img/icon_pl.png" />下载</a>
						</div>
					</dd>
				</dl>
			</div>
		</div>
    	<div class="bg_ff">
    		<div class="width1200 clearfix">
    			<div class="">
    				<div class="padding_tb20 new-wuqu-list">
	    				<div class="clearfix bg_b padding_10">
	    				<span class="check-box left mg_top5" v-if="checksta">
				<label for="checkbox">
				<img src="img/check.png" v-if="all" style="cursor: pointer" @click="checkall(1)"/>
				<img src="img/check-checked.png" v-if="!all" style="cursor: pointer" @click="checkall(0)"/>
				</label>
				<input type="checkbox" name="checkbox1" id="checkbox" class="allcheck" hidden="hidden" value="" />
				</span>
			    			<p class="left">
				    			<span style="margin-left: 66px;">歌名</span>
			    		    </p>
			    		    <p class="right">
			    		    	<span>时长 </span>
				    			<span>BPM</span>
				    			<span> KEY </span>
				    			<span style="margin-right: 130px;">更新日期</span>
			    		    </p>
			    		</div>
				        <div class="clearfix new-list" v-for="(l,item) in list" :key="item" >
		    			<p class="left" style="display: flex;align-items: center">
		    			
		    			 <span class="check-box left " style="margin-left: 5px;" v-if="checksta">
                                <label for="checkbox">
                                    <img src="img/check.png" v-if="!l.ischeck" style="cursor: pointer" @click="checkstatus(item)"/>
                                    <img src="img/check-checked.png" v-if="l.ischeck" style="cursor: pointer" @click="checkstatus(item)"/>
                                </label>
                                <input type="checkbox" name="checkbox1" id="checkbox" class="allcheck" hidden="hidden" value="" />
                            </span>
		    			
		    				<span class="over-player"><img width="40" height="40" class="bor_r5 vertical-align_m" :src="l.cover"/>
		    				 <span class="icon-videobtn" :id="'all'+songId"><img :id="songId+'-'+l.id" class="vertical-align_m" src="img/icon-zt.png" @click="playMusic(l.id)"/></span>
		    				</span>

			    			<span class="text name" @click="todetail(l.id)"><span class="musicname">{{l.musicName}}</span>
			    			<span class="musictag" v-if="l.independent == 1"><img src="img/dubo.png" alt=""></span>
			    			<span class="musictag" v-if="l.free == 1"><img src="img/fufei.png" alt=""></span>
			    			</span>
			    		</p>
			    		<div class="right">
			    			<span>{{l.times}}</span>

				    			<span>{{l.speed}}</span>
				    			<span>{{l.tone}}</span>
				    			<span>{{l.updateTime|formdata}}</span>
			    			<span class="relative select-box  text-center padding_5" @click.stop="handelckick">
			    				<i class="color_ff" >￥{{l.gold}}</i>
			    			   <i class="absolute select-list" @mouseleave.prevent="handelleave">
                                                            <a @click="zan(l.id)"><img src="img/icon-zan.png">点赞</a>
                                                            <a @click="download(l.id,1)"><img src="img/icon-xz.png">下载</a>
                                                            <a @click="sc(l.id,0)"><img src="img/icon-start.png">收藏</a>
                                                            <a @click="pla(l.id)"><img src="img/icon-pl.png">评论</a>
                                                            <a @click="pla(l.id,1)"><img src="img/icon-fk.png">反馈</a>
                                                        </i>
			    			</span>
			    		</div>
		    		</div>
			    		
			    		
	    		   </div>
	    		    <div class="padding_b50">
                        <div class="tcdPageCode mg_top20" id="taoqupage"></div>
 			    </div>
    			    <pinglun-component :tid="tid" :type="type"></pinglun-component>
    				
    			</div>
<!--    			<div class="content-right right">-->
<!--    				<div class="padding_10">-->
<!--    					<h4 class="font_14"><strong>简介</strong></h4>-->
<!--    					<p class="lin_25"> {{detail.describle}}</p>-->
<!--    				</div>-->
<!--    			</div>-->
    		</div>

    	</div>
</div>
    `
});

//音乐人
var MusicMan = Vue.component('musicMan-component', {
    data: function () {
        return {
            count: 0,
            data: [],
            mu: [],
            src: [],
            banner: [],
            cu: 1,
            ida: null,
            dl: -1,
            muId: 0,
            scm: false,
            scma: false,
            zjId: 0,
            fk:'',
            songid:this.$route.query.classId,
            today:'',
            isOne:true
        }
    },

    mounted() {
        var that = this;
        var sc = [];
        // var form = new FormData();
        // form.append('type', 7)
        // axios.post(sysurl + 'banner/list', form).then(res => {
        //     if (res.data.code === 0) {
        //
        //         this.banner = res.data.data.list;
        //         var swiper = new Swiper('#banner .swiper-container', {
        //             autoplay: true,
        //             loop: true,
        //             paginationClickable: true,
        //             observer: true,//修改swiper自己或子元素时，自动初始化swiper
        //             observeParents: true,
        //             pagination: {
        //                 el: '.swiper-pagination',
        //                 clickable: true,
        //
        //             },
        //         })
        //     }
        // })
        axios.post(sysurl + 'findClassIdGetAlbumLis?secClassId='+this.$route.query.classId).then(res => {
            if (res.data.code === 0) {
                this.data = res.data.data.list;
                var formdata = new FormData();
                // that.ida = res.data.data.list[4].id
                formdata.append('classId', this.$route.query.classId)
                formdata.append('showCount', 15)
                formdata.append('currentPage', 1)
                axios.post(sysurl + 'findIdGetMusicList', formdata).then(resq => {
                    if (resq.data.code === 0) {
                        this.mu = resq.data.data.list
                        // for(var i=0;i<res.data.data.list.length;i++){
                        //     sc.push("img/icon-zt.png")
                        // }
                        // this.src=sc;
                        $("#fen").createPage({
                            pageCount: parseInt(resq.data.data.totalPage),
                            current: parseInt(resq.data.data.currentPage),
                            backFn: function (p) {
                                that.cu = p
                                that.$options.methods.getdetail.bind(that)()
                            }
                        });
                    }
                })
                var swiper = new Swiper('#swiper-container', {
                    slidesPerView: 4,
                    spaceBetween: 30,
                    slidesPerGroup: 4,
                    loop: true,
                    loopFillGroupWithBlank: true,
                    paginationClickable: true,
                    observer: true,//修改swiper自己或子元素时，自动初始化swiper
                    observeParents: true,
                });

            }
        });

        // $(".select-box").click(function(){
        //     $(this).children('.select-list').fadeIn(200);
        //     $(this).parents(".newuqu-list").siblings().find('.select-list').hide()
        //     $(this).parents("li").siblings().find('.select-list').hide()
        //     $(this).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
        //     $(this).parents(".new-list").siblings().find('.select-list').hide()
        //     $(this).parents(".clearfix ").siblings().find('.select-list ').hide()
        // })
        $(".select-list").mouseleave(function () {
            $(this).fadeOut(200)
        })
        let date = new Date();
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        this.today = y.toString() + '-' + MM + '-' + d

    },

    methods: {
        getdetail:function(){

                    var formdata = new FormData();

                    formdata.append('classId', this.$route.query.classId)
                    formdata.append('showCount', 15)
                    formdata.append('currentPage', this.cu)
                    axios.post(sysurl + 'findIdGetMusicList', formdata).then(res => {
                        if (res.data.code === 0) {
                            this.mu = res.data.data.list
                            this.isOne  = res.data.isOne

                        }
                    })


        },


        handelckick: function (e) {

            $(e.target).children('.select-list').fadeIn(100);
            $(e.target).parents(".newuqu-list").siblings().find('.select-list').hide()
            $(e.target).parents("li").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
            $(e.target).parents(".new-list").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix ").siblings().find('.select-list ').hide()
        },
        handelleave: function (e) {
            $(e.target).fadeOut(200)
        },
        zan: function (id) {
            var uid = getCookie('uid');
            if(uid){
                axios.post(sysurl + 'isZan?musicId=' + id + '&uid=' + uid)
                    .then(res => {
                        if (res.data.code === 0) {
                            if (res.data.data.isZan === 0) {
                                axios.post(sysurl + 'giveZan?musicId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            } else {
                                axios.post(sysurl + 'cancelZan?musicId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            }
                            // layer.msg(res.data.message)


                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }else {
                overy_show()
                $(".login-mask").fadeIn()
            }


        },
        // download: function (id) {
        //     var data = {
        //         musicId: id,
        //         uid: getCookie('uid')
        //     }
        //     // window.open(sysurl + 'download?musicId='+id+'&uid='+data.uid)
        //     axios.post(sysurl + 'getDownloadPower?musicId=' + id + '&uid=' + data.uid)
        //         .then(res => {
        //             if (res.data.code === 0) {
        //
        //
        //             } else {
        //
        //             }
        //         }, err => {
        //
        //         })
        //         .catch((error) => {
        //
        //         })
        // },
        sc(id) {
            this.scm = true
            this.muId = id;

        },
        out() {
            this.scm = false;
            this.scma = false
            $('.login-mask').fadeOut();
        },
        showMessageFromChild(data) {
            this.scm = data;
            this.scma = data;
        },
        pla(id,t) {
            this.fk = t
            this.scma = true;
            this.zjId = id;

        },
        // music:function (id,obj) {
        //     this.$emit("music",id,obj)
        // },
        // showdownload:function (id,type) {
        //     this.$emit('showdownload',id,type)
        // }
        showdownload: function (id, type) {
            overy_show()
            $(".down-mask").fadeIn()
            this.$emit("showdownload", id, type)
        },

        music: function (id) {
            this.$emit("music", id, event.target)
        },
        todetail: function (id) {
            // this.$router.push({path: '/musicList', query: {id: id}})

        }

    },
    // <div style="width:100%;overflow: hidden;">
    // <div :style="wi">
    // </div>
    //
    // </div>
    watch: {
        cu: function (val, oldval) {
            var that = this;
            var formdata = new FormData();
            formdata.append('albumId', this.ida)
            formdata.append('showCount', 15)
            formdata.append('currentPage', val)
            axios.post(sysurl + 'findIdGetMusicList', formdata).then(res => {
                if (res.data.code === 0) {
                    that.mu = res.data.data.list

                }
            })
        }
    },
    template: `<div>
    <musicsc :muid="muId" :video="0"  v-on:muscm="showMessageFromChild" v-if="scm == true"></musicsc>
     <musicpl :zjid="zjId" :type="2" :fk="fk" v-on:muscm="showMessageFromChild" v-if="scma == true"></musicpl>
    
    <div class="overlay" v-if="scm == true || scma == true" @click="out" style="display: block"></div>
    			<div class="width100">
    			
    			 <banner-component :type="7"></banner-component>
    			
<!--			<div id="banner" class="banner width100">-->
<!--				<div class="swiper-container">-->
<!--				    <div class="swiper-wrapper">-->
<!--				    	<div class="swiper-slide" v-for="l in banner"><a :href="l.href" target="_blank" style="display: block;width: 100%"><img :src="l.img"/></a></div>-->
<!--				    </div>-->
<!--				    &lt;!&ndash; Add Pagination &ndash;&gt;-->
<!--				    <div class="swiper-pagination"></div>-->
<!--				  </div>-->
<!--			</div>-->
		</div>

	    <div class="bg_ff padding_b50">
	    	<div class="width1200 ">
	    		<div class=" padding_10">
	    			<!--音乐人-->
	    			<div class="indexbox">
	    				<h4 class="tittle padding_10 bor_b clearfix">
	    					<p class="left">
	    						<img width="30" class="vertical-align_m mg_r10" src="img/index-tittleimg.png"/>
			    				<strong class="blue font_16">音乐 <span class="color_00">人</span></strong>
			    				<strong class="color_b"></strong>
	    					</p>
		    				<router-link :to="'/musicManList?secClassId='+songid" class="right basic_a blue bor_b_blue">查看更多&gt;&gt;  </router-link>
		    			</h4>
		    			<div class="new-wuqu mg_top10 music-man" id="music-man">
                            <div class="swiper-container" style="height: 317px;overflow: initial" id="swiper-container">
                                    <div class="swiper-wrapper" style="justify-content: space-between">
                                          <dl class="music-list swiper-slide" style="margin: 0"   v-for="(l,index) in data" :key="index" v-if="index<4">
		    								<router-link :to="'taoquDetail?id='+l.id"  class="width100">
			    								<dt class="relative">
<!--			    								<span class="needpay" v-if="l.is_pay == 1">付费</span>-->
<!--    				            <span class="needpay" v-if="l.is_pay == 2">VIP下载</span>-->
			    								<img :src="l.cover"/><p class="absolute muisc-nums">歌曲数量: <span class="blue">{{l.musicCount}}</span></p></dt>
			    								<dd class="padding_10 bg_ff">
			    									<h4 class="font_16"> {{l.name}}</h4>
			    									<p class="mg_top10" :class="{'red':l.last_edit_time==today,'':l.last_edit_time!=today}">最后更新日期：{{l.last_edit_time}}</p>			    								</dd>
		    								</router-link>
		    							</dl>
                                    </div>
<!--                                    <div class="swiper-pagination"></div>-->
                                  </div>
		    						
		    						  
		    							<span style="display:block;clear:both"></span>
		    						


		    			    <div class="music-box mg_top40 new-wuqu-list" style="width: 1150px;margin: 0 auto">
		    			    	<div class="clearfix bg_b">
					    			<p class="left mg_top10">

						    			<span class="text name" style="margin-left:56px;width: 350px">歌曲</span>
						    		</p>
						    		<div class="right mg_top10">
						    		<span v-if="!isOne">时长 </span>
		    		    	<span v-if="isOne">分类</span>
			    			<span>BPM</span>
			    			<span> KEY </span>
			    			<span style="margin-right: 133px;">更新日期</span>
						    		</div>
					    	   </div>
		    			    	<div class="clearfix new-list" v-for="(l,index) in mu">
					    			<p class="left" style="display: flex;align-items: center">
						    			<span class="over-player">
						    			<img width="30" height="30" class="bor_r5 vertical-align_m" :src="l.cover">
						    			<span class="icon-videobtn" :id="l.id">
				    			<img :id="songid+'-'+l.id" class="vertical-align_m vertical-align_m-img" @click="music(l.id)" src="img/icon-zt.png">
				    			</span>
						    			</span>
						    			
						    		<span class="text name" @click="todetail(l.id)"><span class="musicname">{{l.musicName}}</span>
			    			<span class="musictag" v-if="l.independent == 1"><img src="img/dubo.png" alt=""></span>
			    			<span class="musictag" v-if="l.free == 1"><img src="img/fufei.png" alt=""></span>
			    			</span>
			    			
						    		</p>
						    		<div class="right">
						    			
						    			<span>{{l.albumName}}</span>
						    			<span>{{l.speed}}</span>
						    			<span>{{l.tone}}</span>
						    			<span>{{l.updateTime}}</span>
						    			<span class="relative select-box  text-center padding_5"  @click.stop="handelckick">
						    				<i class="color_55">￥{{l.gold }}</i>
						    				<i class="absolute select-list" @mouseleave.prevent="handelleave">
						    					<a @click="zan(l.id)" v-if="l.isZan != 1"><img src="img/icon-zan.png">点赞</a>
						    					<a @click="zan(l.id)" v-if="l.isZan == 1"><img src="img/icon-zan.png">已点赞</a>
				    					<a  @click="showdownload(l.id,1)"><img src="img/icon-xz.png">下载</a>
				    					<a @click="sc(l.id)" v-if="l.isFollow != 1"><img src="img/icon-start.png">收藏</a>
				    					<a  v-if="l.isFollow == 1"><img src="img/icon-start.png">已收藏</a>
				    					<a @click="pla(l.id)"><img src="img/icon-pl.png">评论</a>
				    					<a @click="pla(l.id,1)"><img src="img/icon-fk.png">反馈</a>
						    				</i>
						    			</span>
						    		</div>
					    		</div>
					    		
					    		
		    			    </div>
		    			</div>
	    			</div>

	    		</div>
	    		<div class="padding_b50 " >
			    	 <div class="tcdPageCode mg_top20" id="fen"></div>
			    </div>
	    	</div>
	    </div>
</div>
    `
});
//收藏弹窗
var musicSc = Vue.component('musicsc', {
    data: function () {
        return {
            count: 0,
            data: [],
            dataa: [],
            boxid: 0,
            muids: 0,
            ui:false
        }
    },
    props: ["muid", "video"],
    mounted() {
        var that = this;
        var uid = getCookie('uid')
        if(uid == null){
            // window.location.href='login.html';
            this.ui=false
            // overy_show()
            $(".login-mask").fadeIn()
            return false
        }else{
            this.ui=true
            var form = new FormData();
            form.append('uid', uid)
            axios.post(sysurl + 'getBoxList', form).then(res => {
                if (res.data.code === 0) {
                    this.data = res.data.data.list;
                    console.log(res.data.data.list)
                }
            })

            axios.post(sysurl + 'getUserDefineBoxList', form).then(res => {
                if (res.data.code === 0) {
                    this.dataa = res.data.data.list
                }
            })
        }


    },

    methods: {
        cl(e, id) {
            this.boxid = id
            $(e.target).parents(".boxparent").find('.muImg').show()
            $(e.target).parents(".boxparent").siblings().find('.muImg').hide()
            $(e.target).find('.muImg').show()
            $(e.target).siblings().find('.muImg').hide()
        },
        out() {
            this.$emit('muscm', false);

        },
        scy() {
            var uid = getCookie('uid')
            var form = new FormData();
            var that = this;
            console.log(this.video)
            if (this.video == 0) {
                var ur = 'addMusicToBox';
            }
            if (this.video == 1) {
                var ur = 'addVideoToBox';
            } else if (this.video == 2) {
                var ur = 'addAlbumToBox';
            } else if (this.video == 4) {
                var ur = 'addAlbumToBox';
            }
            if (this.boxid != 0) {
                form.append('uid', uid)
                form.append('boxId', this.boxid)
                form.append('mediaId', this.muid)
                axios.post(sysurl + ur, form).then(res => {
                    if (res.data.code === 0) {
                        layer.msg(res.data.message);
                        that.$emit('muscm', false)
                    }else{
                        layer.msg(res.data.message);
                    }
                })
            } else {
                layer.msg('请选择要添加到的音乐盒！')
            }

        }
    },
    // <div style="width:100%;overflow: hidden;">
    // <div :style="wi">
    // </div>
    //
    // </div>
    template: `<div>
  <div class="mask sc-mask" id="tj" style="display: block" v-if="ui == true">
    <h4 class="padding_10 text-center mask-tittle color_ff">添加到音乐盒</h4>

    <div class="mg_top10 mask-list">
<!--    <dl class="clearfix padding_10 boxparent"  style="position: relative" v-for="l in data" @click="cl($event,l.id)" v-if="video != 1 && l.mediaType != 'video' && l.boxType !=0">-->
<!--    <dt class="left mg_r20"><img width="50" height="50" class="bor_r5" :src="l.cover"/></dt>-->
<!--    <dd class="left ">-->
<!--    <h4 class="font_16">{{l.boxName}}</h4>-->
<!--    <p class="mg_top5 color_9">已收藏{{l.mediaCount}}首歌曲</p>-->
<!--   -->
<!--    </dd>-->
<!--     <img src="img/rideo-select.png" class="vertical-align_m mg_r10 muImg" >-->
<!--    </dl>-->
   <dl class="clearfix padding_10 boxparent"  style="position: relative" v-for="l in data" @click="cl($event,l.id)" v-if="video == 1 &&　l.mediaType=='video' && l.boxType == 1">
    <dt class="left mg_r20"><img width="50" height="50" class="bor_r5" :src="l.cover"/></dt>
    <dd class="left ">
    <h4 class="font_16">{{l.boxName}}</h4>
    <p class="mg_top5 color_9">已收藏{{l.mediaCount}}个视频</p>
   
    </dd>
     <img src="img/rideo-select.png" class="vertical-align_m mg_r10 muImg" >
    </dl>
    <dl class="clearfix padding_10 boxparent"  style="position: relative" v-for="l in data" @click="cl($event,l.id)" v-if="video == 4  &&　l.mediaType=='album' && l.boxType == 3">
    <dt class="left mg_r20"><img width="50" height="50" class="bor_r5" :src="l.cover"/></dt>
    <dd class="left ">
    <h4 class="font_16">{{l.boxName}}</h4>
    <p class="mg_top5 color_9">已收藏{{l.mediaCount}}个专辑</p>
   
    </dd>
     <img src="img/rideo-select.png" class="vertical-align_m mg_r10 muImg" >
    </dl>
     <dl class="clearfix padding_10 boxparent"  style="position: relative" v-for="l in data" @click="cl($event,l.id)" v-if="video == 2 &&　l.mediaType=='album' && l.boxType == 2">
    <dt class="left mg_r20"><img width="50" height="50" class="bor_r5" :src="l.cover"/></dt>
    <dd class="left ">
    <h4 class="font_16">{{l.boxName}}</h4>
    <p class="mg_top5 color_9">已收藏{{l.mediaCount}}个专辑</p>
   
    </dd>
     <img src="img/rideo-select.png" class="vertical-align_m mg_r10 muImg" >
    </dl>
    <dl class="clearfix padding_10 boxparent" style="position: relative" v-for="l in dataa" v-if="dataa.length != 0"  @click="cl($event,l.id)"  v-if="video == 0 ">
    <dt class="left mg_r20"><img width="50" height="50" class="bor_r5" :src="l.cover"/></dt>
    <dd class="left ">
    <h4 class="font_16">{{l.boxName}}</h4>
    <p class="mg_top5 color_9">已收藏{{l.mediaCount}}首歌曲</p>
   
    </dd>
     <img src="img/rideo-select.png" class="vertical-align_m mg_r10 muImg">
    </dl>
    <dl  v-if="dataa.length == 0" style="text-align: center">
    没有音乐盒，
    <router-link to="/Boxlist?userId=0" style="text-align: center;color: #1E9FFF">
	    		创建音乐盒	    		
    </router-link>
    </dl>
    </div>
    <p class="mask-abox text-center">
    <a  @click="scy">提交</a>
    <a   @click="out">取消</a>
    </p>
    </div>
</div>
      
    `
});
//上传弹窗
var musicUps = Vue.component('musicups', {
    data: function () {
        return {
            count: 0,
            list: [],
            lista: [],
            checkedValue: 0,
            progress: '',
            up: [],
            gold:0,
            upload_type:'',
            upload_size:0
        }
    },
    mounted() {
        var formdata = new FormData();
        var op = [];
        formdata.append('parentId', 0)
        formdata.append('type', 'm')
        formdata.append('sub', 1)
        axios.post(sysurl + 'findClassByParentId', formdata).then(res => {
            if (res.data.code === 0) {
                this.list = res.data.data;
                for (var i = 0; i < res.data.data.length; i++) {
                    for (var j = 0; j < res.data.data[i].childList.length; j++) {
                        // if(res.data.data[i].childList[j].length != 0){
                        op.push(res.data.data[i].childList[j])
                        // }

                    }
                }
                this.lista = op;

            }
        });
        axios.get(sysurl+ 'sysUser?id=1').then(res => {
            if (res.data.code === 0) {
                //
                var img= res.data.data.upload_type.split(',');

                var htl=''
                for(var i=0;i<img.length;i++){
                    htl+='audio/'+img[i]+','
                }
                this.upload_type=htl;
                this.upload_size=res.data.data.upload_size*1048576


            }
        })

    },

    methods: {
        out() {
            var that = this;
            that.$emit('upsa', false)
        },
        upsa(){
            var that = this;
            for(var i=0;i<document.getElementById("upload").files.length;i++){
                if(document.getElementById("upload").files[i].size > that.upload_size){
                    layer.msg('文件大小超出限制！')
                }
            }
        },
        upfile() {
            var that = this;
            // var up=this.up;
            var uid = getCookie('uid');
            var gold = $('#gold').val();
            var classId = $('#fl').val();
            var eb = this.checkedValue;
            var dat=[];
            for(var i=0;i<document.getElementById("upload").files.length;i++){
                if(document.getElementById("upload").files[i].size > that.upload_size){
                    layer.msg('文件大小超出限制！')
                }else {
                    dat.push({gold: gold, classId: classId, eb: eb, file: document.getElementById("upload").files[i], uid: uid});

                }
            }
            // var file = ;

            // var formdata = new FormData();

            // up.push(formdata);
            // this.up=up;

            that.$emit('start', dat);
            that.$emit('upsa', false)
        },

    },

    template: `
<div>
<div class="mask padding_b20"  style="display: block">
<h4 class="padding_10 text-center mask-tittle color_ff font_16">请选择</h4>
<form action="" method="post" class="padding_lr30">
<p class="mask-inpbox mg_top20">
<label for="">选择分类</label>
<select name=""  id="fl">
<option :value="l.id" v-for="l in list">{{l.className}}</option>
<option :value="l.id" v-for="l in lista">{{l.className}}</option>
</select>
</p>
<p class="mask-inpbox mg_top20">
<label for="">金币</label>
<input type="text" name="" v-model="gold"  id="gold" value="" placeholder="请输入金币">
</p>
<p class="mask-inpbox mg_top20">
<label for="">选择歌曲</label>
<span class="text-center">
    <label for="upload" class="basic_a text-center">上传音乐</label>
        <input type="file"  @change="upsa"  hidden="hidden" :accept="upload_type" multiple  name="upload" id="upload" value="">
    </span>

</p>
<p class="mask-inpbox mg_top20">
<label for="">是否独播</label>
<span class="text-center">
    
        <input type="radio"  class="do"   v-model="checkedValue" style="margin-left: 8px" name="du"  id="yes"  value="1">
<label for="yes" style="width: auto; margin-right: 15px" >是</label>
        <input type="radio" class="do"  v-model="checkedValue" name="du" id="no"   value="0">
<label for="no" style="width: auto;">否</label>
    </span>

</p>
<p class="mg_top20 text-center">
<a href="javascript:;" class="basic_a" @click.stop="upfile">确定</a>
</p>
</form>
</div>
    <div class="overlay" @click="out" style="display: block"></div>
</div>

      
    `
});
//专辑评论弹窗
var musicPl = Vue.component('musicpl', {
    data: function () {
        return {
            count: 0,
            muids: 0,
            text:'评论',
            ui:false
        }
    },
    props: ["zjid", "type",'fk'],
    mounted() {
        var uid = getCookie('uid')
        if(uid == null){
            // window.location.href='login.html';
            this.ui=false
            // overy_show()
            $(".login-mask").fadeIn()
            return false
        }else {
            this.ui=true
            if(this.fk == 1){
                this.text = '反馈'
            }
        }


    },

    methods: {
        out() {
            this.$emit('muscm', false)

        },
        sub() {

            if(this.fk !=1){
                if ($('#cons').val() != '') {
                    var uid = getCookie('token')
                    var formdata = new FormData();
                    formdata.append('type', this.type)
                    formdata.append('tid', this.zjid)
                    formdata.append('content', $('#cons').val())
                    formdata.append('uid', uid)
                    axios.post(sysurl2 + 'comment/sub', formdata).then(res => {
                        if (res.data.code === 0) {
                            layer.msg(res.data.message)
                            $('#cona').val('');
                            this.$emit('muscm', false);
                        } else {
                            layer.msg(res.data.message)
                        }
                    })
                } else {
                    layer.msg('评论不能为空！')
                }
            }else{
                if ($('#cons').val() != '') {
                    var uid = getCookie('token')
                    var formdata = new FormData();

                    if(this.type == 1){
                        formdata.append('type', 3)
                    }else{
                        formdata.append('type', 2)
                    }

                    formdata.append('xxId', this.zjid)
                    formdata.append('phone', '')
                    formdata.append('img', "")
                    formdata.append('content', $('#cons').val())
                    axios.post(sysurl2 + 'feedback/addFeedback', formdata).then(res => {
                        if (res.data.code === 0) {
                            layer.msg(res.data.message)
                            $('#cona').val('');
                            this.$emit('muscm', false);
                        } else {
                            layer.msg(res.data.message)
                        }
                    })
                } else {
                    layer.msg('反馈内容不能为空！')
                }
            }

        }
    },
    // <div style="width:100%;overflow: hidden;">
    // <div :style="wi">
    // </div>
    //
    // </div>
    template: `<div class="mask pl-mask" style="display: block" v-if="ui == true">
    <h4 class="padding_10 text-center mask-tittle color_ff">{{text}}</h4>
    <p class=" mask-font text-center">
    <textarea name="" rows="" cols="" id="cons" placeholder="请输入内容"></textarea>
    </p>
    <p class="mask-abox text-center">
    <a href="javascript:;" @click="sub">提交</a>
    <a href="javascript:;" @click="out">取消</a>
    </p>
    </div>
      
    `
});
//我的视频
var myVideo = Vue.component('myvideo', {
    data: function () {
        return {
            count: 0,
            list: [],
            scma: false,
            zjId: 0,
            cu: 1,
            fk:'',
            name:null
        }
    },
    filters: {
        formdata: function (val) {
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y.toString().substr(2, 2) + '-' + MM + '-' + d;
        }
    },
    mounted() {
        var id = this.$route.query.id;
        this.id = this.$route.query.id;
        this.name=this.$route.query.name
        $(function () {


        });
        var formdata = new FormData();
        formdata.append('showCount', 15)
        formdata.append('boxId', id);
        formdata.append('currentPage', 1)
        axios.post(sysurl + 'getBoxMediaList', formdata).then(res => {
            if (res.data.code === 0) {
                this.list = res.data.data.list
                $("#fen").createPage({
                    pageCount: parseInt(res.data.data.totalPage),
                    current: parseInt(res.data.data.currentPage),
                    backFn: function (p) {
                        that.cu = p
                    }
                });
            }
        })
    },
    watch: {
        cu: function (val, oldval) {

            var that = this
            var formdata = new FormData();
            formdata.append('showCount', 15)
            formdata.append('boxId', this.id);
            formdata.append('currentPage', val)
            axios.post(sysurl + 'getBoxMediaList', formdata).then(res => {
                if (res.data.code === 0) {
                    this.list = res.data.data.list
                }
            })
        }
    },
    methods: {
        handelckick: function (e) {

            $(e.target).children('.select-list').fadeIn(100);
            $(e.target).parents(".music-list").siblings().find('.select-list').hide()
            // $(e.target).parents("li").siblings().find('.select-list').hide()
            // $(e.target).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
            // $(e.target).parents(".new-list").siblings().find('.select-list').hide()
            // $(e.target).parents(".clearfix ").siblings().find('.select-list ').hide()
        },
        handelleave: function (e) {
            $(e.target).fadeOut(200)
        },
        zan: function (id) {
            var uid = getCookie('uid');
            if(uid){
                axios.post(sysurl + 'isZan?videoId=' + id + '&uid=' + uid)
                    .then(res => {
                        if (res.data.code === 0) {
                            if (res.data.data.isZan === 0) {
                                axios.post(sysurl + 'giveZan?videoId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            } else {
                                axios.post(sysurl + 'cancelZan?videoId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            }
                            // layer.msg(res.data.message)


                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }else {
                overy_show()
                $(".login-mask").fadeIn()
            }


        },
        showMessageFromChild(data) {
            this.scm = data;
            this.scma = data;
        },
        out() {
            this.scma = false
        },
        pla(id,t) {
            this.fk = t
            this.scma = true;
            this.zjId = id;

        },
        download: function (id, type) {
            overy_show()
            $(".down-mask").fadeIn()
            this.$emit("showdownload", id, type)
        },
        del(id, mediaId) {
            var that = this
            layer.confirm('确认删除？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                var userid = getCookie('uid');
                var form = new FormData();

                var formdata = new FormData();
                form.append('uid', userid)
                form.append('delId', id)
                form.append('mediaId', mediaId);

                formdata.append('boxId', that.id);
                formdata.append('showCount', 15)
                // window.open(sysurl + 'download?musicId='+id+'&uid='+data.uid)
                axios.post(sysurl + 'removeMediaFromBox', form)
                    .then(res => {
                        if (res.data.code === 0) {
                            layer.msg(res.data.message)
                            axios.post(sysurl + 'getBoxMediaList', formdata).then(res => {
                                if (res.data.code === 0) {
                                    that.list = res.data.data.list
                                    $("#fen").createPage({
                                        pageCount: parseInt(res.data.data.totalPage),
                                        current: parseInt(res.data.data.currentPage),
                                        backFn: function (p) {
                                            that.cu = p
                                        }
                                    });
                                }
                            })


                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }, function(){

            });

        },
    },
    // <div style="width:100%;overflow: hidden;">
    // <div :style="wi">
    // </div>
    //
    // </div>
    template: `
 <div class="bg_ff">
   <musicpl :zjid="zjId" :type="1" :fk="fk" v-on:muscm="showMessageFromChild" v-if="scma == true"></musicpl>
      <div class="overlay" v-if="scma == true" @click="out" style="display: block"></div>
    <div class="width1200">
    <h4 class="tittle padding_10 bor_b">
    <img width="30" class="vertical-align_m mg_r10" src="img/index-tittleimg.png">
    <strong class="blue font_16">{{name}}<span class="color_00">收藏</span></strong> 
    <strong class="color_b">all</strong>
    </h4>
    <div id="taoqu" class="taoqu-box clearfix padding_b50 video-boss">
    
   <h1 style="text-align: center;padding-bottom: 50px;padding-top: 50px;font-size: 16px" v-if="list.length==0">暂无收藏。。</h1>
    <dl v-for="l in list" class="music-list relative" style="display: inline-block;vertical-align: middle;">
    <router-link :to="'/dvplay?id='+l.mediaId" class="width100 absolute video-bof"><img src="img/taoqi-video.png" alt=""></router-link>
<dt class="relative">
<img :src="l.mediaCover">
     <div class="absolute muisc-nums">
     <p class="left mg_top10"><img src="img/icon-time.png"> <span class="color_ff">{{l.mediaTime|formdata}}</span></p>
     <span class="relative select-box  text-center padding_5 right"   @click.stop="handelckick">
    <i class="color_ff">￥{{l.gold}}</i>
    <i class="absolute select-list"  @mouseleave.prevent="handelleave">
  <a @click="zan(l.mediaId)"><img src="img/icon-zan.png">点赞</a>
	<a  @click="download(l.mediaId,2)"><img src="img/icon-xz.png">下载</a>
    <a href="javascript:;" class="icon-pl" @click="pla(l.mediaId)"><img src="img/icon-pl.png">评论</a>
    <a href="javascript:;" class="icon-feek" @click="pla(l.mediaId,1)"><img src="img/icon-fk.png">反馈</a>
    <a href="javascript:;" class="icon-feek" @click="del(l.id,l.mediaId)"><img src="img/icon-dell1.png">移除</a>
    </i>
    </span>
     </div>
</dt>
<dd class="padding_10 bg_ff">
<h4 class="font_16 text "> {{l.mediaName}}</h4>
<p class="clearfix mg_top10">
<span class="left" style="width: 47%;overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;">{{l.mediaTime|formdata}}</span>
<span class="right" style="width: 47%;overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;">{{l.className}}</span>
</p>
</dd>
</dl>
    </div>
        <div class="padding_b50">
     <div class="tcdPageCode mg_top20" id="fen"></div>
    </div>
    </div>
    </div>
      
    `
});
//我的专辑列表
var myZj = Vue.component('myzj', {
    data: function () {
        return {
            count: 0,
            list: [],
            cu: 1,
            today:'',
            name:null
        }
    },

    mounted() {
       this.name=this.$route.query.name
        let date = new Date();
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        this.today = y.toString() + '-' + MM + '-' + d

        var id = this.$route.query.id;
        this.id = this.$route.query.id;
        var that = this
        var formdata = new FormData();
        formdata.append('showCount', 15)
        formdata.append('boxId', id);
        formdata.append('currentPage', 1)
        axios.post(sysurl + 'getBoxMediaList', formdata).then(res => {
            if (res.data.code === 0) {
                this.list = res.data.data.list;
                console.log(res.data.data.currentPage)
                $("#fen").createPage({
                    pageCount: parseInt(res.data.data.totalPage),
                    current: parseInt(res.data.data.currentPage),
                    backFn: function (p) {
                        that.cu = p
                    }
                });
            }
        })
    },
    watch: {
        cu: function (val, oldval) {

            var that = this
            var formdata = new FormData();
            formdata.append('showCount', 15)
            formdata.append('boxId', this.id);
            formdata.append('currentPage', val)
            axios.post(sysurl + 'getBoxMediaList', formdata).then(res => {
                if (res.data.code === 0) {
                    this.list = res.data.data.list;
                }
            })
        }
    },
    methods: {
        del(id, mediaId) {
            var that = this
            layer.confirm('确认删除？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                var userid = getCookie('uid');
                var form = new FormData();

                var formdata = new FormData();
                form.append('uid', userid)
                form.append('delId', id)
                form.append('mediaId', mediaId);

                formdata.append('boxId', that.id);
                formdata.append('showCount', 15);
                formdata.append('currentPage', 1)
                // window.open(sysurl + 'download?musicId='+id+'&uid='+data.uid)
                axios.post(sysurl + 'removeMediaFromBox', form)
                    .then(res => {
                        if (res.data.code === 0) {
                            layer.msg(res.data.message)
                            axios.post(sysurl + 'getBoxMediaList', formdata).then(res => {
                                if (res.data.code === 0) {
                                    that.list = res.data.data.list
                                    $("#fen").createPage({
                                        pageCount: parseInt(res.data.data.totalPage),
                                        current: parseInt(res.data.data.currentPage),
                                        backFn: function (p) {
                                            that.cu = p
                                        }
                                    });
                                }
                            })


                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }, function(){

            });

        },
    },
    // <div style="width:100%;overflow: hidden;">
    // <div :style="wi">
    // </div>
    //
    // </div>
    template: `
 <div class="bg_ff">
    <div class="width1200 ">
    <h4 class="tittle padding_10 bor_b clearfix padding_t50">
    <p class="">
    <img width="30" class="vertical-align_m mg_r10" src="img/index-tittleimg.png">
    <strong class="blue font_16">{{name}} <span class="color_00">收藏</span></strong> 
    <strong class="color_b">ranking list</strong>
    </p>
    </h4>
    
    <div id="taoqu" class="taoqu-box clearfix padding_b50">
    <h1 style="text-align: center;padding-bottom: 50px;padding-top: 50px;font-size: 16px" v-if="list.length==0">暂无专辑。。</h1>
    <dl class="music-list relative" v-if="list.length!=0" v-for="l in list" style="float: left;">
    
    <a class="del" @click.stop="del(l.id,l.mediaId)" style="float: left;color: #333;position: absolute;top: 10px;left: 10px;z-index: 10"><img src="img/icon-dell1.png" alt=""></a>
<router-link :to="'/taoquDetail?id='+l.mediaId+'&type=0'"   class="width100">
<dt class="relative">			
<span class="needpay" v-if="l.is_pay == 1">付费</span>
    				<span class="needpay" v-if="l.is_pay == 2">VIP下载</span>
    				<img :src="l.mediaCover"><p class="absolute muisc-nums">歌曲数量: <span class="blue">{{l.musicCount}}</span> 
</p></dt>
<dd class="padding_10 bg_ff">
<h4 class="font_16 text">{{l.mediaName}}</h4>
<p class="clearfix mg_top10">
<span class="left" style="width: 47%;overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;">{{l.mediaTime}}</span>
<span class="right" style="width: 47%;overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;text-align: right">{{l.className}}</span>
</p>
</dd>
</router-link>
</dl>
    </div>
        <div class="padding_b50">
     <div class="tcdPageCode mg_top20" id="fen"></div>
    </div>
    </div>
        
    
    </div>
      
    `
});
//我的会员中心
var myVip = Vue.component('myvip', {
    data: function () {
        return {
            count: 0,
            num: 2
        }
    },

    mounted() {
        if(this.$route.query.num){

            this.num=this.$route.query.num
        }
    },
    methods: {
        lo(e, id) {
            $(e.target).parents('.aside-box').find('.oli').eq(id).addClass('active');
            $(e.target).parents('.aside-box').find('.oli').eq(id).siblings().removeClass('active');
            this.num = id;
            console.log(id)
        },
        music(i){
            this.$emit("music", i, event.target)
        }
    },
    template: `
    <div class="bg_ff mg_top40">
    <div class="main clearfix">
    <h4 class="tittle padding_10 bor_b mg_b20">
    <img width="30" class="vertical-align_m mg_r10" src="img/index-tittleimg.png">
    <strong class="blue font_16">会员 <span class="color_00">中心</span></strong> 
    <strong class="color_b">The member center</strong>
    </h4>
    <div class="left main-left vip-box">
    <ul class="aside-box">
    
    <li class="oli"  :class="{'active':num == 2}"  @click="lo($event,2)"><a href="javascript:;"><i class="vip-icon vip-icon4"></i>会员权益</a></li>
    <li class="oli" :class="{'active':num == 0}"   @click="lo($event,0)"><a href="javascript:;"><i class="vip-icon vip-icon1"></i>下载记录</a></li>
    <li class="oli" :class="{'active':num == 1}" @click="lo($event,1)"><a href="javascript:;"><i class="vip-icon vip-icon3"></i>上传音乐</a></li>
    <li  class="oli" :class="{'active':num == 3}" @click="lo($event,3)"><a href="javascript:;"><i class="vip-icon vip-icon2"></i>提现记录</a></li>
    <li  class="oli" :class="{'active':num == 4}" @click="lo($event,4)"><a href="javascript:;"><i class="vip-icon vip-icon5"></i>收货地址</a></li>
    <li  class="oli" :class="{'active':num == 5}" @click="lo($event,5)"><a href="javascript:;"><i class="vip-icon vip-icon7"></i>收益记录</a></li>
    <li  class="oli" :class="{'active':num == 6}" @click="lo($event,6)"><a href="javascript:;"><i class="vip-icon vip-icon7"></i>我的订单</a></li>
    <li  class="oli" :class="{'active':num == 7}" @click="lo($event,7)"><a href="javascript:;"><i class="vip-icon vip-icon4"></i>最近播放</a></li>
    </ul>
    </div>
    
    <div class="right main-right">
            <myvipdownload @music="music" v-if="num == 0"></myvipdownload>
                <myvipup  v-if="num == 1"></myvipup>
                <myvipq v-if="num == 2"></myvipq>
                <myviptx v-if="num == 3"></myviptx>
                <myvipdz v-if="num == 4"></myvipdz>
                <myvippay v-if="num == 5"></myvippay>
                <myvipdd v-if="num == 6"></myvipdd>
                <recentplay v-if="num == 7" @music="music"></recentplay>
    </div>
    </div>
    </div> 
    `
});

//最近播放
var recentplay = Vue.component('recentplay', {
    data: function () {
        return {
            count: 0,
            list: [],
            cu: 1,
            istrue: 'music',
            detail: [],
            checksta: false,
            muId: 0,
            scm: false,
            scma: false,
            zjId: 0,
            total: 1,     // 记录总条数
            display: 15,   // 每页显示条数
            current: 1,   // 当前的页数
            songId: 1004,
            downloadtype: 1,
            all:true,
            fk:'',
            isOne:true,
        }
    },

    mounted() {
        var that = this;
        var uid = getCookie('uid');
        var form = new FormData();
        form.append('uid', uid);
        form.append('showCount', 15);
        form.append('currentPage', 1);
        axios.post(sysurl + 'findPlaysByUid', form).then(res => {
            if (res.data.code === 0) {

                this.list = res.data.data.list;
                $("#fen").createPage({
                    pageCount: parseInt(res.data.data.totalPage),
                    current: parseInt(res.data.data.currentPage),
                    backFn: function (p) {
                        that.cu = p
                    }
                });
            }
        })
    },
    watch: {
        cu: function (val, oldval) {

            var that = this
            var uid = getCookie('uid');
            var form = new FormData();
            form.append('uid', uid);
            form.append('showCount', 15);
            form.append('currentPage', val);
            axios.post(sysurl + 'findPlaysByUid', form).then(res => {
                if (res.data.code === 0) {
                    this.list = res.data.data.list;
                }
            })
        }
    },
    methods: {
        tab(name) {
            this.istrue = name
            var that = this;
            var uid = getCookie('uid');
            this.ty=name
            var form = new FormData();
            form.append('uid', uid);
            form.append('showCount', 15);
            form.append('currentPage', 1);
            axios.post(sysurl + 'findPlaysByUid', form).then(res => {
                if (res.data.code === 0) {
                    this.list = res.data.data.list;
                    $("#fen").createPage({
                        pageCount: parseInt(res.data.data.totalPage),
                        current: parseInt(res.data.data.currentPage),
                        backFn: function (p) {
                            that.cu = p
                        }
                    });
                }
            })

        },
        playMusic: function (id) {
            this.$emit("music", id, event.target)
        },

    },
    // <div style="width:100%;overflow: hidden;">
    // <div :style="wi">
    // </div>
    //
    // </div>
    template: `
  <!--最近播放-->
    <div class="danqu-box active padding_lr10" style="display: block">
    <h4 class="padding_10 font_16 vip-tittle"> <strong>最近播放</strong></h4>
    <h3 class="htab">
<!--    <a @click="tab('music')" :class="{active:istrue=='music'}">音乐</a>-->
<!--    <a @click="tab('video')" :class="{active:istrue=='video'}">视频</a>-->
    </h3>
    <div class="vip-box1 mg_top20">
<!--    <dl class="clearfix padding_10 bor_b">-->
<!--    <dt class="left"><img :src="l.cover"/></dt>-->
    <dd class="left">
    <div class="clearfix padding_10 bor_b  new-list"  v-for="l in list" v-if="list.length != 0">
    <p class="left"  v-if="istrue == 'music'" style="display: flex;align-items: center;width: 60%;">
		    			   
		    				<span class="over-player"><img width="40" height="40" class="bor_r5 vertical-align_m" :src="l.cover"/>
		    				 <span class="icon-videobtn" style="left: 6px" :id="'all'+songId" >
		    				 <img :id="songId+'-'+l.musicId" class="vertical-align_m" src="img/icon-zt.png" @click="playMusic(l.musicId)"/></span>
		    				</span>
                           

			    			<span class="text name" ><span class="musicname">{{l.musicName}}</span>
			    			<span class="musictag" v-if="l.independent == 1"><img src="img/dubo.png" alt=""></span>
			    			<span class="musictag" v-if="l.free == 1"><img src="img/fufei.png" alt=""></span>
			    			
			    		
			    			</span>
			    		</p>
			    		 <router-link :to="'/dvplay?id='+l.videoId" class="left"  v-if="istrue == 'video'" style="display: flex;align-items: center;width: 60%;">
		    			   
		    				<span class="over-player">
		    				<img width="40" height="40" class="bor_r5 vertical-align_m" :src="l.cover"/>
		    				</span>
                           

			    			<span class="text name" ><span class="musicname">{{l.videoName}}</span>
			    			
			    		
			    			</span>
			    		</router-link>
<!--    <div class="left">-->
    	
<!--    <h4>{{l.musicName}}</h4>-->
<!--    <h4>{{l.videoName}}</h4>-->
<!--            <p class="mg_top5 color_9">{{l.className}}</p>-->
<!--    </div>-->
    <div class="right" style="height: 40px;display: flex;align-items: center;width: 280px;justify-content: space-between">
    <span class="mg_r20">{{l.className}}<i class="blue"></i></span>
    <span class="mg_left20 color_b">{{l.operTime}}</span>
    </div>
    </div>
    </dd>
<!--    </dl>-->
    </div>
            <div class="padding_b50">
     <div class="tcdPageCode mg_top20" id="fen"></div>
    </div>
    </div>
      
    `
});




//我的订单
var myVipdd = Vue.component('myvipdd', {
    data: function () {
        return {
            count: 0,
            list: [],
            cu: 1,
            data:'',
            payStatus:'',
            pay:false,
            paysd:false,
            src:'',
            moneys:0,
            page:0,
            wldata:[],
            ddsa:false
        }
    },

    mounted() {
        var that = this
        var formdata = new FormData();
        formdata.append('showCount', 20);
        formdata.append('currentPage', 1);
        axios.post(sysurl2+ 'order/getOrderInfo',formdata).then(res => {
            if (res.data.code === 0) {

                this.data=res.data.varList
                $("#fens").createPage({
                    pageCount: parseInt(res.data.pd.totalPage),
                    current: parseInt(res.data.pd.currentPage),
                    backFn: function (p) {
                        that.cu = p
                    }
                });

            }
        })
    },
    methods: {
        out() {
            this.pay = false
            this.paysd = false
        },
        payDs(){
            var that = this;
            var formdata = new FormData();
            formdata.append('orderNo', this.oderId);
            formdata.append('isWeb', 1);
            formdata.append('type', 1);
            axios.post(sysurl2 + 'order/orderPay',formdata).then(res => {
                if (res.data.code === 0) {
                    this.pay = false;
                    this.paysd = true;
                    this.src=res.data.data.qrCodeImage
                    var fors=new FormData();
                    fors.append('orderNo',  res.data.data.orderNo)
                    fors.append('type', 2)
                    that.set=setInterval(function () {

                        axios.post(sysurl2 + 'pay/getOrderStatus', fors).then(res => {
                            if (res.data.code === 0) {
                                if(res.data.flag == true){
                                    layer.msg('支付成功！');
                                    clearInterval(that.set);
                                    that.pay = false
                                    that.paysd = false
                                }
                            }else {
                                layer.msg(res.data.message)
                            }
                        })

                    },2000)
                }
            })
        },
        alypay(){
            var formdata = new FormData();
            formdata.append('orderNo', this.oderId);
            formdata.append('isWeb', 1);
            formdata.append('type', 2);
            axios.post(sysurl2 + 'order/orderPay',formdata).then(res => {
                if (res.data.code === 0) {
                    $('#ops').html(res.data.data.orderString)
                }
            })
        },
        pays(id,money){
            this.oderId=id;
            this.moneys=money
            this.pay=true;
        },
        che(id){
            this.payStatus=id;
            var that = this
            var formdata = new FormData();
            formdata.append('showCount', 20);
            formdata.append('currentPage', 1);
            formdata.append('payStatus', id);
            axios.post(sysurl2+ 'order/getOrderInfo',formdata).then(res => {
                if (res.data.code === 0) {
                    this.page=res.data.pd.currentPage
                    this.data=res.data.varList
                    $("#fens").createPage({
                        pageCount: parseInt(res.data.pd.totalPage),
                        current: parseInt(res.data.pd.currentPage),
                        backFn: function (p) {
                            that.cu = p
                        }
                    });

                }
            })
        },
        qx(id){
            var that = this
            layer.confirm('确认删除？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                var form = new FormData();
                form.append('orderNo', id);
                axios.post(sysurl2+ 'order/deleteOrder',form).then(res => {
                    if (res.data.code === 0) {
                        layer.msg('取消成功！');
                        var formdata = new FormData();

                        formdata.append('showCount', 20);
                        formdata.append('currentPage', 1);
                        formdata.append('payStatus', this.payStatus);
                        axios.post(sysurl2+ 'order/getOrderInfo',formdata).then(res => {
                            if (res.data.code === 0) {
                                that.data=res.data.varList

                            }
                        })

                    }
                })
            }, function(){

            });

        },
        paystx(id){
            var formdata = new FormData();
            formdata.append('orderNumber', id);
            axios.post(sysurl2 + 'order/sendRmind',formdata).then(res => {
                if (res.data.code === 0) {
                    layer.msg('提醒发货成功！')
                }else {
                    layer.msg(res.data.message)
                }
            })
        },
        wl(id){
            var that = this;
            that.ddsa=true
            var formdata = new FormData();
            formdata.append('orderNo', id);
            axios.post(sysurl2 + 'order/courierQuery',formdata).then(res => {
                if (res.data.code === 0) {
                    that.wldata=res.data.data
                }else {
                    layer.msg(res.data.message)
                }
            })
        },
        nos(){
            this.ddsa=false
        }
    },
    watch: {
        cu: function (val, oldval) {

            var that = this;
            this.page=val;
            var uid = getCookie('uid');
            var formdata = new FormData();
            formdata.append('showCount', 20);
            formdata.append('currentPage', val);
            formdata.append('payStatus', this.payStatus);
            axios.post(sysurl2+ 'order/getOrderInfo',formdata).then(res => {
                if (res.data.code === 0) {
                    this.data=res.data.varList

                }
            })

        }
    },
    // <div style="width:100%;overflow: hidden;">
    // <div :style="wi">
    // </div>
    //
    // </div>
    template: `
        <!--交易记录-->
    <div class="danqu-box  padding_lr10" style="display: block">
    <div class="tts" v-if="ddsa == true" style="padding-bottom: 25px;position: absolute;width: 410px;margin: auto;top: 0;left:0;right:0;bottom:0;background: #fff;height: 212px;z-index: 5">
    <div class="tits" style="text-align: right">
        <a @click="nos" style="display: inline-block;width: 25px;height: 25px;text-align: center;line-height: 25px">
        <img src="img/close.png" style="display: inline-block;width: 12px;height: 12px" alt="">
        </a>
    </div>
   <div class="mms" style="width: 80%;margin: auto;">
    <h3 style="font-size:16px;
font-weight:400;
color:rgba(73,73,73,1);">物流信息</h3>
<div style="overflow: auto;height: 160px;" v-if="wldata != null">
<p style="font-size:14px;
font-family:Microsoft YaHei;
font-weight:400;
color:rgba(121,121,121,1);
margin-top: 24px">{{wldata.ShipperCode}}：{{wldata.LogisticCode}}</p>
<p v-for="l in wldata.Traces" style="font-size:14px;
font-family:Microsoft YaHei;
font-weight:400;
color:rgba(121,121,121,1);
margin-top: 24px">
<span style="display: block">{{l.AcceptStation}}</span>
<span style="display: block">{{l.AcceptTime}}</span>
</p>
</div>

</div>
    </div>
    <b id="ops"></b>
     <!--支付方式-->
    <div class="mask pay-mask" style="display: block" v-if="pay==true">
    <h4 class="padding_10 text-center mask-tittle color_ff">选择支付方式</h4>
    <div class="pay-font1 mg_tb20 padding_lr30">
    <h4 class="font_16"><img class="vertical-align_m" width="20" src="img/tj.png"/>提交订单</h4>
    <p class="mg_top20">先购先得，请尽快完成支付！</p>
    <p class="mg_top10">支付金额：<span class="red">￥{{moneys}}</span></p>
    </div>
    <div class="pay-iconbox mg_tb20 text-center">
        <a href="javascript:;" @click="payDs" class="mg_r20"><img width="30" class="vertical-align_m " src="img/pay-icon-wx.png"/> 微信支付</a>
        <a href="javascript:;" @click="alypay" class="mg_left20"><img width="30" class="vertical-align_m " src="img/pay-icon-pay.png"/> 支付宝支付</a>
        </div>
    </div>
  <div v-if="paysd==true"  class="imges er-mask" style="background: #fff;width: 500px;height: 306px;border-radius: 10px;overflow: hidden;position: absolute;margin: auto;left:0;right:0;top:0;bottom:0;z-index: 10">
 <h4 class="mask-tittle color_ff padding_10 text-center" style="width: auto">微信支付</h4>
             <img :src="src" style="width: 190px;margin: auto;display: block;margin-top: 20px" alt="">
             <p style="font-size: 16px;text-align: center;margin-top: 15px">请使用微信扫二维码支付！</p>
</div>
    <div class="overlay" @click="out" v-if=" pay == true || paysd == true" style="display: block"></div>
    <h4 class="padding_10 font_16 vip-tittle"> 
    <span :class="{acc:payStatus==''}" @click="che('')">全部订单</span>
    <span :class="{acc:payStatus=='0'}" @click="che('0')">待付款</span>
    <span :class="{acc:payStatus=='1'}" @click="che('1')">待发货</span>
    <span :class="{acc:payStatus=='2'}" @click="che('2')">已发货</span>
    </h4>
    <div class="vip-box1 mg_top20" style="background: #fff">
       <table class="ops">
       <tr>
       <td  class="fir" style="padding-left: 30px">商品</td>
       <td>数量</td>
       <td>单价</td>
<!--       <td>实付款</td>-->
       <td>订单状态</td>
       <td>操作</td>
       </tr>
        <tbody v-for="(l,index) in data">
        <tr>
        <td colspan="4" class="los">{{l.created}} 订单编号： {{l.orderNo}}</td>
        <td class="los"  style="padding-left: 0;text-align: center"><img  v-if="l.payStatus == 0" @click="qx(l.orderNo)" class="del" src="img/dls.png" alt=""></td>
        <tr class="nopadd">
        <td></td>
        <td></td>
        <td></td>
         
        <td rowspan="2" v-if="l.payStatus == 0">待支付</td>
       <td rowspan="2" v-if="l.payStatus == 1">待发货</td>
       <td rowspan="2" v-if="l.payStatus == 2"><a>已发货</a></td>
        <td rowspan="2">
         <a class="bta"  v-if="l.payStatus == 0" @click="pays(l.orderNo,l.shouldPay)">付款</a>
         <a class="bta"  v-if="l.payStatus == 1" @click="paystx(l.orderNo)">提醒发货</a>
         <a class="bta"  v-if="l.payStatus == 2" @click="wl(l.orderNo)">查看物流</a>
            <a  v-if="l.payStatus == 0" @click="qx(l.orderNo)">取消订单</a>
        </td>
        </tr>
        <tr v-for="ls in l.orderInfo">
       <td class="fir">
       <img :src="ls.coverUrl[0]" alt="">
       <span>{{ls.goodName}}</span>
        </td>
       <td>x{{ls.counts}}</td>
     <td>￥{{ls.price}}</td>
<!--       <td>￥{{l.realPay}}</td>-->
       
<!--       <td >-->
<!--       <a class="bta"  v-if="l.payStatus == 0" @click="pay(l.orderNo,)">付款</a>-->
<!--       <a  v-if="l.payStatus == 0">取消订单</a>-->
<!--       </td>-->
       </tr>
        </tbody>
        </table>
    </div>
    <div class="padding_b50">
     <div class="tcdPageCode mg_top20" id="fens"></div>
    </div>
    </div>
      
    `
});

//我的下载记录
var myVipdownload = Vue.component('myvipdownload', {
    data: function () {
        return {
            count: 0,
            list: [],
            cu: 1,
            istrue: 'music',
            detail: [],
            checksta: false,
            muId: 0,
            scm: false,
            scma: false,
            zjId: 0,
            total: 1,     // 记录总条数
            display: 15,   // 每页显示条数
            current: 1,   // 当前的页数
            songId: 1003,
            downloadtype: 1,
            all:true,
            fk:'',
            isOne:true,
        }
    },

    mounted() {
        var that = this;
        var uid = getCookie('uid');
        var form = new FormData();
        form.append('uid', uid);
        form.append('showCount', 15);
        form.append('currentPage', 1);
        form.append('type', this.istrue);
        axios.post(sysurl + 'myDowloadList', form).then(res => {
            if (res.data.code === 0) {

                this.list = res.data.data.list;
                $("#fen").createPage({
                    pageCount: parseInt(res.data.data.totalPage),
                    current: parseInt(res.data.data.currentPage),
                    backFn: function (p) {
                        that.cu = p
                    }
                });
            }
        })
    },
    watch: {
        cu: function (val, oldval) {

            var that = this
            var uid = getCookie('uid');
            var form = new FormData();
            form.append('uid', uid);
            form.append('showCount', 15);
            form.append('currentPage', val);
            form.append('type', this.istrue);
            axios.post(sysurl + 'myDowloadList', form).then(res => {
                if (res.data.code === 0) {
                    this.list = res.data.data.list;
                }
            })
        }
    },
    methods: {
        tab(name) {
            this.istrue = name
            var that = this;
            var uid = getCookie('uid');
            this.ty=name
            var form = new FormData();
            form.append('uid', uid);
            form.append('showCount', 15);
            form.append('currentPage', 1);
            form.append('type', name);
            axios.post(sysurl + 'myDowloadList', form).then(res => {
                if (res.data.code === 0) {
                    this.list = res.data.data.list;
                    $("#fen").createPage({
                        pageCount: parseInt(res.data.data.totalPage),
                        current: parseInt(res.data.data.currentPage),
                        backFn: function (p) {
                            that.cu = p
                        }
                    });
                }
            })

        },
        playMusic: function (id) {
            this.$emit("music", id, event.target)
        },

    },
    // <div style="width:100%;overflow: hidden;">
    // <div :style="wi">
    // </div>
    //
    // </div>
    template: `
  <!--下载记录-->
    <div class="danqu-box active padding_lr10" style="display: block">
    <h4 class="padding_10 font_16 vip-tittle"> <strong>下载记录</strong></h4>
    <h3 class="htab">
    <a @click="tab('music')" :class="{active:istrue=='music'}">音乐</a>
    <a @click="tab('video')" :class="{active:istrue=='video'}">视频</a>
    </h3>
    <div class="vip-box1 mg_top20">
<!--    <dl class="clearfix padding_10 bor_b">-->
<!--    <dt class="left"><img :src="l.cover"/></dt>-->
    <dd class="left">
    <div class="clearfix padding_10 bor_b  new-list"  v-for="l in list" v-if="list.length != 0">
    <p class="left"  v-if="istrue == 'music'" style="display: flex;align-items: center;width: 60%;">
		    			   
		    				<span class="over-player"><img width="40" height="40" class="bor_r5 vertical-align_m" :src="l.cover"/>
		    				 <span class="icon-videobtn" style="left: 6px" :id="'all'+songId" >
		    				 <img :id="songId+'-'+l.musicId" class="vertical-align_m" src="img/icon-zt.png" @click="playMusic(l.musicId)"/></span>
		    				</span>
                           

			    			<span class="text name" ><span class="musicname">{{l.musicName}}</span>
			    			<span class="musictag" v-if="l.independent == 1"><img src="img/dubo.png" alt=""></span>
			    			<span class="musictag" v-if="l.free == 1"><img src="img/fufei.png" alt=""></span>
			    			
			    		
			    			</span>
			    		</p>
			    		 <router-link :to="'/dvplay?id='+l.videoId" class="left"  v-if="istrue == 'video'" style="display: flex;align-items: center;width: 60%;">
		    			   
		    				<span class="over-player">
		    				<img width="40" height="40" class="bor_r5 vertical-align_m" :src="l.cover"/>
		    				</span>
                           

			    			<span class="text name" ><span class="musicname">{{l.videoName}}</span>
			    			
			    		
			    			</span>
			    		</router-link>
<!--    <div class="left">-->
    	
<!--    <h4>{{l.musicName}}</h4>-->
<!--    <h4>{{l.videoName}}</h4>-->
<!--            <p class="mg_top5 color_9">{{l.className}}</p>-->
<!--    </div>-->
    <div class="right">
    <span class="mg_r20">消耗金币<i class="blue">{{l.gold}}</i></span>
    <span class="mg_left20 color_b">{{l.operTime}}</span>
    </div>
    </div>
    </dd>
<!--    </dl>-->
    </div>
            <div class="padding_b50">
     <div class="tcdPageCode mg_top20" id="fen"></div>
    </div>
    </div>
      
    `
});

//我的上传记录
var myVipupload = Vue.component('myvipupload', {
    data: function () {
        return {
            count: 0,
            list: [],
            cu: 1,
            dl: -1,
        }
    },

    mounted() {
        var that = this;
        var uid = getCookie('uid');
        var form = new FormData();
        form.append('uid', uid);
        form.append('showCount', 15);
        form.append('currentPage', 1);
        form.append('type', 'all');
        axios.post(sysurl + 'myUploadList', form).then(res => {
            if (res.data.code === 0) {

                this.list = res.data.data.list;
                $("#fen").createPage({
                    pageCount: parseInt(res.data.data.totalPage),
                    current: parseInt(res.data.data.currentPage),
                    backFn: function (p) {
                        that.cu = p
                    }
                });
            }
        })
    },
    watch: {
        cu: function (val, oldval) {

            var that = this
            var uid = getCookie('uid');
            var form = new FormData();
            form.append('uid', uid);
            form.append('showCount', 15);
            form.append('currentPage', val);
            form.append('type', 'music');
            axios.post(sysurl + 'myUploadList', form).then(res => {
                if (res.data.code === 0) {
                    this.list = res.data.data.list;
                }
            })
        }
    },
    methods: {
        img: function (e, index) {
            if (index != this.dl) {
                $(e.target).find('.vertical-align_m').attr('src', 'img/icon-bf.png');
                $(e.target).attr('src', 'img/icon-bf.png');
                $(e.target).parents('.mm').siblings().find('.vertical-align_m-img').attr('src', 'img/icon-zt.png');

                $(".play-footer").fadeIn(200)

                this.dl = index
            } else {
                $(e.target).find('.vertical-align_m').attr('src', 'img/icon-zt.png');
                $(e.target).attr('src', 'img/icon-zt.png');
                this.dl = -1;
                $(".play-footer").fadeOut(200)

            }

            // if(src[e]=='img/icon-zt.png'){
            //     for(var i=0;i<src.length;i++){
            //         Vue.set(this.src, i,'img/icon-zt.png')
            //     }
            //     Vue.set(this.src, e,'img/icon-bf.png')
            // }else {
            //     Vue.set(this.src, e,'img/icon-zt.png')
            // }
        },
    },
    // <div style="width:100%;overflow: hidden;">
    // <div :style="wi">
    // </div>
    //
    // </div>
    template: `
  <div>
<div class="new-box" style="background: url(img/bg1.png) no-repeat;background-size: 100% 100%">
<div class="width1200">
<dl class="clearfix">
<!--<dt class="left"  v-if="list.length != 0"><img width="220" :src="list[0].cover"/></dt>-->
<dt class="left" ><img width="220" src="img/new-img.png"/></dt>
<dd class="left">
<h2 class="color_ff">我上传的歌曲</h2>
<p class="mg_top10">
<span class="color_b mg_r20"  v-if="list.length != 0">歌曲：{{list.length}}首</span>
<span class="color_b mg_r20"  v-if="list.length == 0">歌曲：0首</span>
<!--<span class="color_b mg_left20">更新时间：2018-10-10</span>-->
</p>
</dd>
</dl>
</div>
</div>
<div class="bg_ff">
<div class="width1200">
<h4 class="tittle padding_10 bor_b">
<img width="30" class="vertical-align_m mg_r10" src="img/index-tittleimg.png">
<strong class="blue font_16">我上传的 <span class="color_00">音乐</span></strong>
<strong class="color_b">all</strong>
</h4>

<div class="music-box mg_top40">
<div class="clearfix bg_b padding_5">
<p class="left">
<span style="margin-left: 45px;">歌曲</span>
</p>
<p class="right">

<span style="padding-right: 8px">状态</span>
<span style="padding-right: 8px">金币</span>
<span>分类</span>
<span class="mg_left10" style="min-width: 130px;margin-left: 0">更新日期</span>
</p>
</div>
<div class="clearfix " v-for="(l,index) in list" v-if="list.length != 0">

<p class="left">
<span class="icon-videobtn" @click.stop="img($event,index)"><img class="vertical-align_m" src="img/icon-zt.png"></span>
<span class="song-name text">{{l.musicName}}</span>
</p>
<div class="right">

<span v-if="l.audit == 0"  style="padding-right: 22px;color: #F0302F ">未审核</span>
<span v-if="l.audit == 1"  style="padding-right: 22px">已审核</span>
<span>{{l.gold}}</span>
<span>{{l.className}}</span>
<span style="min-width:130px">{{l.created}}</span>
</div>
</div>
</div>
<div class="padding_b50">
<div class="tcdPageCode mg_top20" id="fen"></div>
</div>
</div>
</div>
</div>
      
    `
});
//我的交易记录
var myVippay = Vue.component('myvippay', {
    data: function () {
        return {
            count: 0,
            list: [],
            cu: 1,
            data:'',
            cu:''
        }
    },

    mounted() {
        var that = this
        var formdata = new FormData();
        formdata.append('showCount', 20);
        formdata.append('currentPage', 1);
        formdata.append('USER_ID', getCookie('uid'));
        axios.post(sysurl2+ 'user/userProfit',formdata).then(res => {
            if (res.data.code === 0) {

                this.data=res.data.data.varList
                $("#fens").createPage({
                    pageCount: parseInt(res.data.data.totalPage),
                    current: parseInt(res.data.data.currentPage),
                    backFn: function (p) {
                        that.cu = p
                    }
                });

            }
        })
    },
    methods: {},
    watch: {
        cu: function (val, oldval) {

            var that = this
            var uid = getCookie('uid');
            var formdata = new FormData();
            formdata.append('showCount', 20);
            formdata.append('currentPage', val);
            formdata.append('USER_ID', getCookie('uid'));
            axios.post(sysurl2+ 'user/userProfit',formdata).then(res => {
                if (res.data.code === 0) {
                    this.data=res.data.data.varList

                }
            })

        }
    },
    // <div style="width:100%;overflow: hidden;">
    // <div :style="wi">
    // </div>
    //
    // </div>
    template: `
        <!--交易记录-->
    <div class="danqu-box  padding_lr10" style="display: block">
    <h4 class="padding_10 font_16 vip-tittle"> <strong>交易记录</strong></h4>
    <div class="vip-box1 mg_top20" style="background: #fff">
       <table cellspacing="0" class="tablea">
        <tr>
        <th>歌曲名称</th>
        <th>音乐类型</th>
        <th>下载会员</th>
        <th>下载时间</th>
        <th>收入金币</th>
        </tr>
        <tr v-for="l in data">
        <td style="display: inline-block;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 83px;
">{{l.music_name}}</td>
        <td>{{l.type_name}}</td>
        <td>{{l.download_name}}</td>
        <td>{{l.created}}</td>
        <td>{{l.money}}</td>
        </tr>
        </table>
    </div>
    <div class="padding_b50">
     <div class="tcdPageCode mg_top20" id="fens"></div>
    </div>
    </div>
      
    `
});
//上传音乐
var myVipup = Vue.component('myvipup', {
    data: function () {
        return {
            count: 0,
            list: [],
            up: false,
            start: [],
            progress: [],
            bt: [],
            ti: [],
            upload_url:''
        }
    },
    components: {musicUps},
    watch: {
        start: function (val, oldval) {
            console.log(this.start)
        }
    },
    mounted() {
        axios.get(sysurl+ 'sysUser?id=1').then(res => {
            if (res.data.code === 0) {

                this.upload_url=res.data.data.uploadUrl


            }
        })
    },
    methods: {
        upa() {
            this.up = true;

        },
        dels(index){
            this.start.splice(index,1)
        },
        showMessageFromChild(data) {
            this.up = data
        },
        st(data) {
            console.log(data)
            for(var i=0;i<data.length;i++){
                this.start.push(data[i]);
                this.progress.push('0%');
            }


            // this.progress.push('0%');

        },
        upstart() {
            var that = this
            var bt = this.bt;
            var ti = this.ti;

            for (var i = 0; i < this.start.length; i++) {

                that.$options.methods.axo.bind(that)(i)

            }

        },
        axo(i){
            var that = this
            var bt = this.bt;
            var ti = this.ti;
            var formdata = new FormData();

            formdata.append('uid', this.start[i].uid);
            formdata.append('gold', this.start[i].gold);
            formdata.append('classId', this.start[i].classId);
            formdata.append('eb', this.start[i].eb);
            formdata.append('files', this.start[i].file);
            var config =  {
                onUploadProgress: progressEvent => {
                    var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%'
                    // that.progress[i]='完成';
                    if (complete == '100%') {

                        // that.progress[i] = '完成';
                        Vue.set(that.progress, i, '完成');
                    } else {
                        // that.progress[i] = complete;
                        Vue.set(that.progress, i, complete);
                    }
                }
            };
            axios.post(that.upload_url, formdata,config).then(res => {
                if (res.data.status == 'success') {

                    bt.push(res.data.bitrate);
                    ti.push(res.data.times);
                    // this.start = [];
                }
            })
        }
    },
    // <div style="width:100%;overflow: hidden;">
    // <div :style="wi">
    // </div>
    //
    // </div>
    template: `
            <!--上传音乐-->
        <div class="danqu-box  padding_lr10" style="display: block">
                <musicups v-on:start="st"   v-on:upsa="showMessageFromChild"  v-if="up == true"></musicups>
        <h4 class="padding_10 font_16 vip-tittle clearfix"> 
        <strong class="left">上传音乐</strong>
        <router-link to="/myVipupload" class="right blue">我的上传</router-link>
        </h4>
        <div class="mg_top20 buy-box">
    <h4 class="bg_f5 padding_10 clearfix"> 
    <a class="left basic_a upload-stare" @click="upa">上传音乐</a>
    <a class="right font_14 basic_a " @click="upstart">开始上传</a>
    </h4>
    <div class="mg_top20 buy-box" style="border: none;padding-bottom: 40px;">
        <table border="" style="    table-layout: fixed;" cellspacing="" cellpadding="" class="goods-tab upload-tab">
        <tbody>
        <tr class="padding_10">
        <th class="name" style="width: 360px;display: table-cell;">歌名</th>
        <th>比特率</th>
        <th>时长</th>
        <th>大小</th>
        <th>状态</th>
        <th>操作</th>
        </tr>
        
        <tr class="spun-box" v-for="(l,index) in start" v-if="start.length != 0" :key="index">

        <td class="name text"  style="width: 360px;display: table-cell;overflow: hidden">{{l.file.name}}</td>
        <td v-if="ti.length != 0">{{ti[index]}}</td>
        <td v-if="ti.length == 0">--</td>
        <td v-if="bt.length != 0">{{bt[index]}}</td>
        <td v-if="bt.length == 0">--</td>
        <td>{{(l.file.size/1024/1000).toFixed(2)}}MB</td>
        <td v-if="progress.length != 0">上传 {{progress[index]}}</td>
        <td v-if="progress.length == 0">上传 0%</td>
        <td><a href="javascript:;" @click="dels(index)" class="blue">删除</a></td>
        </tr>
        </tbody>
    </table>
    </div>
    </div>
        <!--<form action="" method="post" class="vip-form">
        <p class="mg_top20"><label for="">歌曲名：</label><input type="text" placeholder="请输入歌曲名" /></p>
        <p class="mg_top20"><label for="">时长：</label><input type="text" placeholder="请输入歌曲名时长" /></p>
        <p class="mg_top20"><label for="">下载所需金额：</label><input type="number" placeholder="请输入下载所需金额" /></p>
        <p class="mg_top20">
        <label for="">选择歌曲分类：</label>
        <select name="">
        <option value="">HIPHOP</option>
        <option value="">HIPHOP</option>
        <option value="">HIPHOP</option>
        <option value="">HIPHOP</option>
        </select>
        </p>
        <p class="mg_top20">
        <label for="">选择上传的音乐：</label>
        <label for="file" class="file">请选择文件</label>
        <input type="file" id="file" hidden="hidden" />
        </p>
        <p class="mg_top40 text-center " style="width: 200px; margin: auto;"><a href="javascript:;" class="big-btn">上传</a></p>
        </form>-->
        </div>
    `
});
//会员权益
var myVipq = Vue.component('myvipq', {
    data: function () {
        return {
            count: 0,
            list: [],
            cu: 1,
            user: null,
            text: null,
            pp:false
        }
    },

    mounted() {
        axios.post(sysurl2 + 'user/info')
            .then(res => {
                if (res.data.code === 0) {
                    this.user = res.data.USER;
                    var form = new FormData();
                    form.append('VIP_ID', res.data.USER.VIP)
                    axios.post(sysurl2 + 'vip/vipInfoById', form)
                        .then(res => {
                            if (res.data.code === 0) {
                                this.text = res.data.data;

                            } else {

                            }
                        });
                } else {

                }
            });
    },
    methods: {
        out(){
            this.pp=false
        },
        upl(){
            this.pp=true
        }
    },
    // <div style="width:100%;overflow: hidden;">
    // <div :style="wi">
    // </div>
    //
    // </div>
    template: `
            <!--会员权益-->
        <div class="danqu-box  padding_lr10" v-if="user != null" style="display: block">
        <h4 class="padding_10 font_16 vip-tittle"> <strong>会员权益</strong></h4>
        <dl class="padding_10 mg_top40 clearfix vip-qy">
        <dt class="left"><img :src="user.HEADURL"/></dt>
        <dd class="left">
        <h4 class="font_15 mg_top20">你的会员等级是：<span class="yell"><i style="display: inline-block;border: 1px solid #2EB82E;padding: 5px;font-size: 12px;color: #2EB82E;border-radius: 5px;margin-left: 8px;margin-right: 8px">{{user.GROUPNAME}}</i>{{user.VIPNAME}}</span><a href="javascript:;" @click="upl" class="basic_a mg_left20">升级</a></h4>
        <p class="mg_top10">
          <span class="mg_r20" v-if="user.VIPLEVEL != 0">到期时间：{{user.ENDTIME}}</span>
        </p>
        <p class="mg_top20">
        <span class="mg_r20">上传歌曲：{{user.UPLOAD_MUSIC}}首</span>
        <span class="mg_left20">会员收益分成比：{{user.PERSENTAGE}}%</span>0
        </p>
        <p class="mg_top10">累计收益：{{user.GOLD}}金币</p>
        </dd>
        </dl>
        <div class="text-box padding_10">
        <textarea name="" readonly v-if="text != null"  :value="text.SUMMARY" placeholder="会员权益介绍"></textarea>
        </div>
        <vippay  v-if="pp==true" :info="user" ></vippay>
          <div class="overlay" style="display: block"  v-if="pp==true" @click="out"></div>
        </div>
    `
});
//提现记录
var myViptx = Vue.component('myviptx', {
    data: function () {
        return {
            count: 0,
            list: [],
            cu: 1
        }
    },

    mounted() {
        var that = this;
        var form = new FormData();
        form.append('showCount', 15);
        form.append('currentPage', 1);
        axios.post(sysurl2 + 'user/withdrawList', form).then(res => {
            if (res.data.code === 0) {
                this.list = res.data.PAGE.LIST;
                $("#fen").createPage({
                    pageCount: parseInt(res.data.PAGE.totalPage),
                    current: parseInt(res.data.PAGE.currentPage),
                    backFn: function (p) {
                        that.cu = p
                    }
                });

            }
        })
    },
    watch: {
        cu: function (val, oldval) {
            var that = this;
            var form = new FormData();
            form.append('showCount', 15);
            form.append('currentPage', val);
            axios.post(sysurl2 + 'user/withdrawList', form).then(res => {
                if (res.data.code === 0) {
                    this.list = res.data.PAGE.LIST

                }
            })
        }
    },
    methods: {},
    // <div style="width:100%;overflow: hidden;">
    // <div :style="wi">
    // </div>
    //
    // </div>
    template: `
               <!--提现记录-->
        <div class="danqu-box  padding_lr10" style="display: block">
    <h4 class="padding_10 font_16 vip-tittle"> <strong>提现记录</strong></h4>
    <div class="vip-box1 mg_top20">
    <dl v-for="l in list" class="clearfix padding_10 bor_b">
    <dt class="left"><img :src="l.HEADURL"/></dt>
    <dd class="left width90">
    <div class="clearfix">
    <div class="left">
    <h4 v-if="l.TYPE == 0">微信</h4>
    <h4 v-if="l.TYPE == 1">支付宝</h4>
    <h4 v-if="l.TYPE == 2">银行卡</h4>
            <p class="mg_top5 color_9">{{l.NICKNAME}}</p>
    </div>
    <div class="right">
    <span class="mg_r20">-￥{{l.MONEY}} 
    <i class="yell" v-if="l.STATUS == 0">提现中</i>
    <i class="blue" v-if="l.STATUS == 1">提现成功</i>
    </span>
    <span class="mg_left20 color_b">{{l.CREATEAT}}</span>
    </div>
    </div>
    </dd>
    </dl>
    </div>
    <div class="padding_b50 " >
			    	 <div class="tcdPageCode mg_top20" id="fen"></div>
			    </div>
    </div>
    `
});
//地址列表
var myVipdz = Vue.component('myvipdz', {
    data: function () {
        return {
            count: 0,
            list: [],
            defultAddress: {
                sheng: '四川省',
                shi: '成都市',
                qu: '武侯区',
                // di:''
            },
            add: false
        }
    },

    mounted() {
        // var form=new FormData();
        // form.append('type',7)
        axios.post(sysurl2 + 'user/addressList').then(res => {
            if (res.data.code === 0) {

                this.list = res.data.LIST;

            }
        })
    },
    components: {arrs},
    methods: {
        sub() {

            var sheng = this.defultAddress.sheng + this.defultAddress.shi + this.defultAddress.qu;
            var address = $('#di').val();
            if ($('#name').val() != '' && $('#phone').val() != '' && $('#di').val() != '') {
                var formdata = new FormData();
                formdata.append('name', $('#name').val());
                formdata.append('phone', $('#phone').val());
                formdata.append('region', sheng);
                formdata.append('address', address);
                formdata.append('type', 1);
                axios.post(sysurl2 + 'user/addAddress', formdata).then(res => {
                    if (res.data.code === 0) {
                        layer.msg(res.data.message);
                        this.add = false
                        axios.post(sysurl2 + 'user/addressList').then(res => {
                            if (res.data.code === 0) {

                                this.list = res.data.LIST;

                            }
                        })
                    } else {
                        layer.msg(res.data.message)
                    }
                })
            } else {
                layer.msg('缺少参数！')
            }

        },
        bcd(e, id) {
            var region = $(e.target).parents('.spun-box').find('.address-se').val();
            var name = $(e.target).parents('.spun-box').find('.name-s').val();
            var phone = $(e.target).parents('.spun-box').find('.phone-s').val();
            var address = $(e.target).parents('.spun-box').find('.address-si').val();
            if (name != '' && phone != '' && address != '' && region != '') {
                var formdata = new FormData();
                formdata.append('name', name);
                formdata.append('phone', phone);
                formdata.append('region', region);
                formdata.append('address', address);
                formdata.append('type', 1);
                formdata.append('id', id);
                axios.post(sysurl2 + 'user/editAddress', formdata).then(res => {
                    if (res.data.code === 0) {
                        layer.msg(res.data.message)
                        $(e.target).parents('.spun-box').find('td input').attr('disabled', true);
                        $(e.target).parents('.spun-box').find('td input').css("border", 'none')
                        $(e.target).parents('.spun-box').find('.edito-bc').hide();
                        $(e.target).parents('.spun-box').find('.edito-address').show();
                    } else {
                        layer.msg(res.data.message)
                    }
                })
            } else {
                layer.msg('缺少参数！')
            }

        },
        edito(e) {
            $(e.target).parents('.spun-box').find('td input').attr('disabled', false);
            // $(this).parents('.spun-box').find('td input').val('');
            $(e.target).parents('.spun-box').find('td input').css("border", '1px solid #ccc')
            $(e.target).parents('.spun-box').find('.edito-address').hide();
            $(e.target).parents('.spun-box').find('.edito-bc').show();
        },
        del(e, id) {
            var that = this
            layer.confirm('确定删除？',{
                btn: ['确定','取消'] //按钮
            }, function(){
                var formdata = new FormData();
                formdata.append('id', id);
                axios.post(sysurl2 + 'user/delAddress', formdata).then(res => {
                    if (res.data.code === 0) {
                        layer.msg(res.data.message);
                        axios.post(sysurl2 + 'user/addressList').then(res => {
                            if (res.data.code === 0) {

                                that.list = res.data.LIST;

                            }
                        })
                    } else {
                        layer.msg(res.data.message)
                    }
                })
            }, function(){
                
            })

        },
        addas() {
            this.add = true
        },
        mo(id) {
            var formdata = new FormData();
            formdata.append('id', id)
            axios.post(sysurl2 + 'user/setDefault', formdata).then(res => {
                if (res.data.code === 0) {
                    layer.msg(res.data.message)
                    axios.post(sysurl2 + 'user/addressList').then(res => {
                        if (res.data.code === 0) {
                            this.list = res.data.LIST;

                        }
                    })
                } else {
                    layer.msg(res.data.message)
                }
            })
        }
    },
    // <div style="width:100%;overflow: hidden;">
    // <div :style="wi">
    // </div>
    //
    // </div>
    template: `
             <!--地址列表-->
        <div class="danqu-box padding_10" style="display: block">
        <h4 class="padding_10 font_16 vip-tittle"> <strong>地址列表</strong></h4>
        <div class="mg_top20 buy-box">
    <h4 class="bg_f5 padding_10">收货地址 <a href="javascript:;" @click="addas" class="right blue add-address-a">新增收货地址</a></h4>
    <div class="mg_top20 buy-box" style="border: none;padding-bottom: 40px;">
        <table border="" cellspacing="" cellpadding="" class="goods-tab add-address-tab">
        <tbody>
        <tr class="padding_10">
        <th>默认</th>
        <th>收货人</th>
        <th>电话/手机</th>
        <th>地区</th>
        <th>详细地址</th>
        <th>操作</th>
        </tr>
        <tr class="spun-box" v-for="l in list">
        <td class="address-m" @click="mo(l.id)">
    <img v-if="l.type == 1" style="width: 20px;height: 20px" src="img/rideo-select.png" alt="">
    <img v-if="l.type == 0" style="width: 20px;height: 20px" src="img/rideo.png" alt="">
</td>
        <td class="address-name"><input type="text" name="" class="name-s"  :value="l.name" disabled=""/></td>
        <td class="address-phone"><input type="number" name="" class="phone-s"  :value="l.phone" disabled=""/></td>
        <td class="address">
                            <input type="text" style="width: auto;max-width: 150px" name=""  class="address-se" :value="l.region" disabled=""/>
<!--                            <input type="text" style="width: 150px;" name=""  class="address-s" :value="l.region+'-'+l.address" disabled=""/>-->
                            </td>
                            <td class="address">
                            <input type="text" style="width: auto;max-width: 150px" name=""  class="address-si" :value="l.address" disabled=""/>
                             </td>
        <td>
        <a href="javascript:;" @click.stop="edito($event)" class="mg_r20 edito-address"><img width="15" src="img/icon-edito.png"/></a>
                            <a href="javascript:;" @click.stop="bcd($event,l.id)" class="mg_r20 edito-bc" style="display: none">保存</a>
        <a href="javascript:;" @click.stop="del($event,l.id)" class="dell-address"><img width="15" src="img/icon-dell1.png"/></a>
        </td>
        </tr>

        </tbody>
    </table>
    </div>
    <form action="" method="post" class="padding_10 add-address" v-if="add == true" style="display: block">
    <div class="mg_top10 order-inp">
    <span>
    <label for="">收货人：</label>
    <input type="text" name="" id="name"  value="" placeholder="请输入您的真实姓名" />
    </span>
    <span>
    <label for="">手机号码：</label>
    <input type="tel" name=""  id="phone" value="" placeholder="请输入您的手机号码" />
    </span>
    </div>
    <div class="mg_top10 order-inp" id="dzi">
                    <arrs v-model="defultAddress"></arrs>
    </div>
    <div class="mg_top10 order-inp">
    <label for="">收货地址：</label>
    <textarea name="" rows="" cols="" id="di" placeholder="请填写详细地址"></textarea>
    </div>
    <div class="text-center mg_top40">
    <a href="javascript:;" class="basic_a" @click="sub">保存</a>
    </div>
    </form>
    </div>
        </div>
    `
});
//充值弹窗
var vipPay = Vue.component('vippay', {
    data: function () {
        return {
            count: 0,
            list: [],
            ids: -1,
            data: [],
            ind: 0,
            user: null,
            img:'',
            gid:0,
            type:0,
            htmls:'',
            ers:false,
            text:[],
            set:null
        }
    },
    props: ["info"],
    mounted() {
        // var form=new FormData();
        // form.append('type',7)
        // $(".paystyle-top a").click(function(){
        //     var index = $(this).index();
        //     $(this).addClass("active").siblings().removeClass("active");
        //     $(".paystle-boss").eq(index).addClass("active").siblings().removeClass("active");
        // });
        // $(".paystle-box1").on('click','.pay-list',function(){
        //     $(this).addClass("active").parents(".swiper-slide").siblings().find(".pay-list").removeClass("active");
        //     $(this).addClass("active").siblings().removeClass("active");
        // })
        this.user = this.info;
        // console.log(this.user.VIP)
        var form = new FormData();
        form.append('VIP_ID', this.user.VIP)
        axios.post(sysurl2 + 'vip/vipInfoById', form)
            .then(ress => {
                if (ress.data.code === 0) {
                    this.text = ress.data.data;

                } else {

                }
            });
        axios.post(sysurl2 + 'vip/vipGroupInfo').then(res => {
            if (res.data.code === 0) {

                this.list = res.data.data;
                var form = new FormData();
                // form.append('GROUP_ID', res.data.data[1].VIPGROUP_ID)
                axios.post(sysurl2 + 'vip/goldInfo').then(res => {
                    if (res.data.code === 0) {

                        this.data = res.data.data;
                        this.gid=res.data.data[0].id
                        // var form = new FormData();
                        // form.append('isWeb', 1)
                        // form.append('goldId', res.data.data[0].id)
                        // form.append('type', 1)
                        //
                        // axios.post(sysurl2 + 'pay/rechargeGold', form).then(res => {
                        //     if (res.data.code === 0) {
                        //         this.img=res.data.data.qrCodeImage
                        //
                        //     }
                        // })
                        var swiper = new Swiper('#swiper-container', {

                            slidesPerView: 4,
                            spaceBetween: 20,
                            // slidesPerGroup: 4,
                            // centeredSlides: true,//居中
                            // loop: true,
                            // loopFillGroupWithBlank: true,
                            paginationClickable: true,
                            observer: true,//修改swiper自己或子元素时，自动初始化swiper
                            observeParents: true,
                            navigation: {
                                nextEl: '.swiper-button-next',
                                prevEl: '.swiper-button-prev',
                            },
                        });
                        setTimeout(function () {
                            document.getElementsByClassName('swiper-wrapper')[0].style.transform='translate3d(0px, 0px, 0px)'
                        },50)

                    }
                })


            }
        })
    },
    methods: {
        pay(type){
            var that = this;
            var form = new FormData();
            form.append('isWeb', 1)
            if(this.type == 0){

                form.append('goldId', this.gid)
                form.append('type', type);
                axios.post(sysurl2 + 'pay/rechargeGold', form).then(res => {
                    if (res.data.code === 0) {
                        // var url='weixin://wxpay/bizpayurl?appid='+res.data.data.appid+'&mch_id='+
                        //     'nonce_str=f6808210402125e30663234f94c87a8c&product_id=1&time_stamp=1415949957&sign=512F68131DD251DA4A45DA79CC7EFE9D'
                        // this.data = res.data.data;
                        this.img=res.data.data.qrCodeImage
                        this.ers=true;
                        var fors=new FormData();
                        fors.append('orderNo',  res.data.data.orderNo)
                        fors.append('type', 1)
                        that.set=setInterval(function () {

                            axios.post(sysurl2 + 'pay/getOrderStatus', fors).then(res => {
                                if (res.data.code === 0) {
                                    if(res.data.flag == true){
                                        layer.msg('支付成功！');
                                        clearInterval(that.set);
                                        that.$emit('hid',false)
                                    }
                                }else {
                                    layer.msg(res.data.message)
                                }
                            })

                        },2000)
                    }else {
                        layer.msg(res.data.message)
                    }
                })


            }else  if(this.type == 1){
                form.append('VIP_ID', this.gid)
                form.append('type', type)
                axios.post(sysurl2 + 'vip/buyVipById', form).then(res => {
                    if (res.data.code === 0) {
                        this.img=res.data.data.qrCodeImage
                        // this.data = res.data.data;
                        this.ers=true;
                        var fors=new FormData();
                        fors.append('orderNo',  res.data.data.orderNo)
                        fors.append('type', 0)
                        that.set=setInterval(function () {

                            axios.post(sysurl2 + 'pay/getOrderStatus', fors).then(res => {
                                if (res.data.code === 0) {
                                    if(res.data.flag == true){
                                        layer.msg('支付成功！');
                                        clearInterval(that.set);
                                        that.$emit('hid',false)
                                    }
                                }else {
                                    layer.msg(res.data.message)
                                }
                            })

                        },2000)
                    }else {
                        layer.msg(res.data.message)
                    }
                })
            }
        },
        pays(type){
            var that = this;
            var form = new FormData();
            form.append('isWeb', 1)
            if(this.type == 0){

                form.append('goldId', this.gid)
                form.append('type', type)

                axios.post(sysurl2 + 'pay/rechargeGold', form).then(res => {
                    if (res.data.code === 0) {

                       this.htmls=res.data.aliOreder;
                       $('#htmls').html(res.data.aliOreder)
                    }else {
                        layer.msg(res.data.message)
                    }
                })
            }else  if(this.type == 1){
                form.append('VIP_ID', this.gid)
                form.append('type', type)
                axios.post(sysurl2 + 'vip/buyVipById', form).then(res => {
                    if (res.data.code === 0) {
                        this.htmls=res.data.data.orderString;
                        $('#htmls').html(res.data.data.orderString)
                    }else {
                        layer.msg(res.data.message)
                    }
                })
            }
        },
        check(index, id,type) {
            this.ids = index;
            this.type=type;
            this.ind = 0;
            var form = new FormData();
            form.append('GROUP_ID', id)
            axios.post(sysurl2 + 'vip/vipInfo', form).then(res => {
                if (res.data.code === 0) {

                    this.data = res.data.data;
                    this.gid = res.data.data[0].VIP_ID;
                    // var form = new FormData();
                    // form.append('isWeb', 1)
                    // form.append('VIP_ID', this.gid)
                    // form.append('type', 1)
                    // axios.post(sysurl2 + 'vip/buyVipById', form).then(res => {
                    //     if (res.data.code === 0) {
                    //         this.img=res.data.data.qrCodeImage
                    //         // this.data = res.data.data;
                    //
                    //     }
                    // })
                    var swiper = new Swiper('#swiper-container', {
                        slidesPerView: 4,
                        spaceBetween: 20,
                        // slidesPerGroup: 4,
                        // loop: true,
                        // loopFillGroupWithBlank: true,
                        paginationClickable: true,
                        observer: true,//修改swiper自己或子元素时，自动初始化swiper
                        observeParents: true,
                    });
                    setTimeout(function () {
                        document.getElementsByClassName('swiper-wrapper')[0].style.transform='translate3d(0px, 0px, 0px)'
                    },50)
                }
            })
        },
        nod(index,id,type) {
            this.ind = index,
                this.gid=id;
            var that = this;
            // var form = new FormData();
            // form.append('isWeb', 1)
            // if(this.type == 0){
            //
            //     form.append('goldId', id)
            //     form.append('type', 1)
            //
            //     axios.post(sysurl2 + 'pay/rechargeGold', form).then(res => {
            //         if (res.data.code === 0) {
            //
            //             this.img=res.data.data.qrCodeImage
            //
            //         }
            //     })
            // }else  if(this.type == 1){
            //     form.append('VIP_ID', id)
            //     form.append('type', 1)
            //     axios.post(sysurl2 + 'vip/buyVipById', form).then(res => {
            //         if (res.data.code === 0) {
            //             this.img=res.data.data.qrCodeImage
            //             // this.data = res.data.data;
            //
            //         }
            //     })
            // }

        },
        cde(index,type) {
            this.ids = index;
            this.type=type;
            this.ind = 0;
            axios.post(sysurl2 + 'vip/goldInfo').then(res => {
                if (res.data.code === 0) {

                    this.data = res.data.data;
                    this.gid = res.data.data[0].id;
                    // var form = new FormData();
                    // form.append('isWeb', 1)
                    // form.append('goldId', res.data.data[0].id)
                    // form.append('type', 1)
                    //
                    // axios.post(sysurl2 + 'pay/rechargeGold', form).then(res => {
                    //     if (res.data.code === 0) {
                    //         this.img=res.data.data.qrCodeImage
                    //
                    //     }
                    // })
                    var swiper = new Swiper('#swiper-container', {
                        slidesPerView: 4,
                        spaceBetween: 20,
                        // slidesPerGroup: 4,
                        // loop: true,
                        // loopFillGroupWithBlank: true,
                        paginationClickable: true,
                        observer: true,//修改swiper自己或子元素时，自动初始化swiper
                        observeParents: true,
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                    });
                    setTimeout(function () {
                        document.getElementsByClassName('swiper-wrapper')[0].style.transform='translate3d(0px, 0px, 0px)'
                    },50)
                }
            })
        }
    },
    template: `
<div>
 <div v-if="ers==true"  class="imges er-mask" style="background: #fff;width: 500px;height: 306px;border-radius: 10px;overflow: hidden;position: absolute;margin: auto;left:0;right:0;top:0;bottom:0;z-index: 10">
 <h4 class="mask-tittle color_ff padding_10 text-center" style="width: auto">微信支付</h4>
             <img :src="img" style="width: 190px;margin: auto;display: block;margin-top: 20px" alt="">
             <p style="font-size: 16px;text-align: center;margin-top: 15px">请使用微信扫二维码支付！</p>
</div>
  <div class="mask vip-mask" v-if="ers==false" style="display: block">
            
             <b v-html="htmls" id="htmls"></b> 
\t\t\t<h4 class="padding_10 text-center mask-tittle color_ff" v-if="user != null">{{user.NICKNAME}}  VIP等级:{{text.GROUPNAME}}  (余额：{{user.GOLD}}金币)</h4>
\t\t\t<div class="paystyle-top">
<a href="javascript:;" @click="cde(-1,0)" v-for="(l,index) in list"  v-if="l.NAME == '钱包充值'"  :class="{'active':ids == -1}">{{l.NAME}}</a>

\t\t\t\t<a href="javascript:;" @click="check(index,l.VIPGROUP_ID,1)" :class="{'active':ids == index}" v-for="(l,index) in list"  v-if="l.NAME != '钱包充值'">{{l.NAME}}</a>
</div>
\t\t\t<div class="paystle-main bor_ds">
\t\t\t\t<div class="mg_tb20 vip paystle-boss active">
\t\t\t\t\t<div class="paystle-box1 clearfix">
\t\t\t\t\t\t<div class=" mg_top10 vip"  style="position: relative">
\t\t\t\t\t\t\t<div class="swiper-container"  style="width: 80%;margin: auto" id="swiper-container">
\t\t\t\t\t\t\t\t<div class="swiper-wrapper" >
            <div class="swiper-slide "  style="padding-top: 45px" v-if="ids == -1" v-for="(l,index) in data">
\t\t\t\t\t\t\t\t\t\t<div class="pay-list text-center relative "  :class="{'active':ind==index}"  @click="nod(index,l.id)">
\t\t\t\t\t\t\t\t\t\t\t<p>￥{{l.NUMBER}}</p>
\t\t\t\t\t\t\t\t\t\t\t<h6 class="" >{{l.NAME}}</h6>
\t\t\t\t\t\t\t\t\
\t\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t\t<div class="swiper-slide "  style="display: inline;padding-top: 45px;height: 116px;min-width:auto !important;position: static" v-if="ids != -1" v-for="(l,index) in data">
\t\t\t\t\t\t\t\t\t\t<div class="pay-list text-center "  @click="nod(index,l.VIP_ID)" :class="{'active':ind==index}">
\t\t\t\t\t\t\t\t\t\t\t<p v-if="l.IS_PREFERENTIAL != 1">￥{{l.MONEY}}</p>
                        <p v-if="l.IS_PREFERENTIAL == 1">
                        <s style="font-size: 12px;color: #969696">￥{{l.MONEY}}</s>￥{{l.MONEY - l.PREFERENTIAL}}
                        </p>
\t\t\t\t\t\t\t\t\t\t\t<h6 class="" >{{l.NAME}}</h6>
<!--\t\t\t\t\t\t\t\t\t\t\t<h6 class="" v-if="l.MONTH == 0">{{l.DAYS}}天</h6>-->
\t\t\t\t\t\t\t\t\t\t\t<div class="absolute vip-font text_left" >
\t\t\t\t\t\t\t\t\t\t\t\t<p v-html="l.SUMMARY"></p>
\t\t\t\t\t\t\t\t\t\t\t\t<p class="mg_top5">每天下载：{{l.DOWNLOADS}}首</p>
\t\t\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t\t</div>
                  
\t\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t\t<!-- Add Pagination -->
\t\t\t\t\t\t\t\t<!--<div class="swiper-pagination"></div>-->
\t\t\t\t\t\t\t\t
\t\t\t\t\t\t\t</div>
<div class="swiper-button-next"></div>
\t\t\t\t\t\t\t\t<div class="swiper-button-prev"></div>
\t\t\t\t\t\t</div>

\t\t\t\t\t</div>
\t\t\t\t</div>

\t\t\t</div>
\t\t\t<div class="pay-iconbox mg_tb20 text-center">
\t\t\t\t<a href="javascript:;" @click="pay(1)"><img width="30" class="vertical-align_m" src="img/pay-icon-wx.png"/> 微信支付</a>
\t\t\t\t<a href="javascript:;" @click="pays(2)" class="mg_left20"><img width="30" class="vertical-align_m " src="img/pay-icon-pay.png"/> 支付宝支付</a>
<!--\t\t\t\t<span class="mg_left20"><img width="80" height="80"class="vertical-align_m "  :src="img"/> </span>-->
\t\t\t</div>
\t\t</div>
</div>
           
    `
});
//提现弹窗
var vipTx = Vue.component('viptx', {
    data: function () {
        return {
            count: 0,
            list: [],
            ids: 0,
            data: [],
            ind: -1,
            user: null,
            cod: false,
            number: 60,
            phone: '',
            codese: '',
            money: '',
            set: null,
            yt: '发送验证码',
            tyop: 0
        }
    },
    props: ["info"],
    mounted() {

        this.user = this.info;
        this.phone=this.user.PHONE
    },
    methods: {

        nod(index) {
            this.ind = index
        },
        time() {
            // if(this.phone == this.user.PHONE){
                var form=new FormData();
                form.append('phone',this.phone);
                form.append('type',4);
                axios.post(sysurl2 + 'sms/getIdentifyingCode', form).then(res => {
                    if (res.data.code === 0) {
                        layer.msg('发送成功！');
                        this.cod = true;
                        this.set = setInterval(() => {
                            if (this.number > 0) {
                                this.number--;
                                // this.number=num
                            } else {
                                this.cod = false;
                                clearInterval(this.set);
                                this.number = 60;
                                console.log(this.cod)
                            }
                        }, 1000)
                    } else {
                        layer.msg(res.data.message)
                    }
                })
            // }else {
            //     layer.msg(res.data.message)
            // }


        },
        type(e) {
            this.tyop = e
        },
        sub() {

            if(this.money <= this.user.GOLD){
                var form = new FormData();
                form.append('phone', this.phone)
                form.append('code', this.codese)
                axios.post(sysurl2 + 'sms/checkCode', form).then(res => {
                    if (res.data.code === 0) {

                        form.append('MONEY', this.money)
                        form.append('TYPE', this.tyop)
                        axios.post(sysurl2 + 'user/withdraw', form).then(res => {
                            if (res.data.code === 0) {
                                layer.msg(res.data.message)
                                this.$emit('muscm', false)
                            } else {
                                layer.msg(res.data.message)
                            }
                        })


                    } else {
                        layer.msg(res.data.message)
                    }
                })
            }else {
                layer.msg('余额不足！')
            }




        },
        out() {
            this.$emit('muscm', false)
        },


    },
    watch: {
        // number:function (val,oldval) {
        //     if(val<0){
        //
        //     }else {
        //
        //
        //     }
        //     // var set= setInterval(() => {
        //     //
        //     // },1000)
        //     // this.number=val;
        // }
    },
    template: `<div id="tx" class="mask tx-mask" style="display: block">
<h4 class="padding_10 text-center mask-tittle color_ff" v-if="user != null">{{user.NICKNAME}}  VIP等级:{{user.VIPLEVEL}}  (余额：{{user.GOLD}}金币)</h4>
\t\t\t<div class="text_left mg_tb10 padding_lr30">
\t\t\t\t<p class="mask-inpbox"><span>提现金额 ：<input type="number" name="" v-model="money"   value="" placeholder="请输入提现金额" /></span></p>
\t\t\t\t<div class="mg_top10 radio-box">
\t\t\t\t\t<span>提现到：</span>
\t\t\t\t\t<i class="radio-sex" @click="type(0)">
\t\t\t\t\t\t<label for="wx">
\t\t\t\t\t\t\t<img class="radio-list vertical-align_m" src="img/rideo.png" v-if="tyop!=0"/>
\t\t\t\t\t\t\t<img class="radio-list vertical-align_m" src="img/rideo-select.png" v-if="tyop==0"/>
\t\t\t\t\t\t\t<img class="vertical-align_m mg_left20" src="img/pay-icon-wx.png"/>微信
\t\t\t\t\t\t</label>
\t\t\t\t\t\t<input type="radio"  name="sex" id="wx"  checked="checked" hidden="hidden" value="" />
\t\t\t\t\t</i>
\t\t\t\t\t<p style="margin:20px 0 0 56px;" @click="type(1)" class="radio-sex">
\t\t\t\t\t\t<input type="radio" name="sex" hidden="hidden" id="pay" value="" />
\t\t\t\t\t\t<label for="pay">
\t\t\t\t\t\t\t<img class="radio-list vertical-align_m" src="img/rideo.png" v-if="tyop!=1"/>
\t\t\t\t\t\t\t<img class="radio-list vertical-align_m" src="img/rideo-select.png" v-if="tyop==1"/>
\t\t\t\t\t\t\t<img class="vertical-align_m mg_left20" src="img/pay-icon-pay.png"/>支付宝
\t\t\t\t\t\t</label>
\t\t\t\t\t\t<input type="radio"  name="sex" id="payOder" hidden="hidden" value="" />
\t\t\t\t\t</p>
\t\t\t\t\t<p style="margin:20px 0 0 56px;" @click="type(2)" class="radio-sex">
\t\t\t\t\t\t<input type="radio" name="sex" hidden="hidden" id="cardOder" value="" />
\t\t\t\t\t\t<label for="cardOder">
\t\t\t\t\t\t\t<img class="radio-list vertical-align_m" src="img/rideo.png" v-if="tyop!=2"/>
\t\t\t\t\t\t\t<img class="radio-list vertical-align_m" src="img/rideo-select.png" v-if="tyop==2"/>
\t\t\t\t\t\t\t<img class="vertical-align_m mg_left20" src="img/icon-bank.png"/>银行卡
\t\t\t\t\t\t</label>
\t\t\t\t\t\t<input type="radio"  name="sex" id="cardOder" hidden="hidden" value="" />
\t\t\t\t\t</p>
\t\t\t\t</div>
\t\t\t\t<div class="mask-inpbox relative code-box mg_top20">
\t\t\t\t\t<span>手机号：</span>
\t\t\t\t\t<input type="tel" name=""   value="" readonly v-model="phone"  placeholder="请输入手机号"/> <br />
\t\t\t\t\t<input type="tel" name=""  value=""  style="margin: 10px 0 0 55px;"  v-model="codese" placeholder="请输入验证码"/>
\t\t\t\t\t<input type="text"  class="generate_code color_ff absolute" @click="time"  v-if="cod == false"  :value="yt" readonly="readonly"  >
\t\t\t\t\t<input type="text"  class="generate_code color_ff absolute"   v-if="cod == true"  :value="number" readonly="readonly"  >
\t\t\t\t</div>
\t\t\t</div>
\t\t\t<p class="mask-abox text-center">
\t\t\t\t<a href="javascript:;" @click="sub">提交</a>
\t\t\t\t<a href="javascript:;" @click="out">取消</a>
\t\t\t</p>
\t\t</div>`
});

//音乐人详情
var musicManDetail = Vue.component('musicManDetail-component', {
    data: function () {
        return {
            count: 0,
            data: [],
            src: [],
            main: null,
            list: [],
            id: 0,
            muId: 0,
            zjId: 0,
            scm: false,
            scma: false,
            dl: -1,
            al: 0,
            cu: 1,
            type: 1,
            songId:this.$route.query.id,
            fk:''
        }
    },

    components: {
        musicSc,
        musicPl
    },
    mounted() {
        var id = this.$route.query.id;
        this.id = this.$route.query.id;
        this.type = this.$route.query.type;
        var that = this;

        var form = new FormData();

        form.append('albumId', id);
        form.append('showCount', 15);
        form.append('currentPage', 1);
        axios.post(sysurl + 'findIdGetMusicList', form).then(res => {
            if (res.data.code === 0) {
                this.data = res.data.data.list;
                //
                $("#fen").createPage({
                    pageCount: parseInt(res.data.data.totalPage),
                    current: parseInt(res.data.data.currentPage),
                    backFn: function (p) {
                        that.cu = p
                    }
                });
            }
        });
        axios.post(sysurl + 'findAlbumId?id=' + id).then(res => {
            if (res.data.code === 0) {
                this.main = res.data.data

            }
        });
        var formdata = new FormData();
        formdata.append('type', 4);
        formdata.append('tid', id);
        axios.post(sysurl2 + 'comment/list', formdata).then(res => {
            if (res.data.code === 0) {
                this.list = res.data.data.list
            }
        });
        var appendNumber = 4;
        var prependNumber = 1;
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 3,
            centeredSlides: true,
            spaceBetween: 30,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
        $(".select-box").click(function () {
            $(this).children('.select-list').fadeIn(200);
            $(this).parents(".newuqu-list").siblings().find('.select-list').hide()
            $(this).parents("li").siblings().find('.select-list').hide()
            $(this).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
            $(this).parents(".new-list").siblings().find('.select-list').hide()
            $(this).parents(".clearfix ").siblings().find('.select-list ').hide()
        })
        $(".select-list").mouseleave(function () {
            $(this).fadeOut(200)
        })


    },
    methods: {
        img: function (e, index) {
            if (index != this.dl) {
                $(e.target).find('.vertical-align_m').attr('src', 'img/icon-bf.png');
                $(e.target).attr('src', 'img/icon-bf.png');
                $(e.target).parents('.mm').siblings().find('.vertical-align_m-img').attr('src', 'img/icon-zt.png');

                $(".play-footer").fadeIn(200)

                this.dl = index
            } else {
                $(e.target).find('.vertical-align_m').attr('src', 'img/icon-zt.png');
                $(e.target).attr('src', 'img/icon-zt.png');
                this.dl = -1;
                $(".play-footer").fadeOut(200)

            }

            // if(src[e]=='img/icon-zt.png'){
            //     for(var i=0;i<src.length;i++){
            //         Vue.set(this.src, i,'img/icon-zt.png')
            //     }
            //     Vue.set(this.src, e,'img/icon-bf.png')
            // }else {
            //     Vue.set(this.src, e,'img/icon-zt.png')
            // }
        },
        changetab: function (type) {
            this.$emit("changetab", type);
        },
        pl() {
            if ($('#con').val() != '') {
                var uid = getCookie('token')
                var formdata = new FormData();
                formdata.append('type', 4)
                formdata.append('tid', this.id)
                formdata.append('content', $('#con').val())
                formdata.append('uid', uid)
                axios.post(sysurl2 + 'comment/sub', formdata).then(res => {
                    if (res.data.code === 0) {
                        layer.msg(res.data.message)
                        $('#con').val('');
                    } else {
                        layer.msg(res.data.message)
                    }
                })
            } else {
                layer.msg('评论不能为空！')
            }

        },
        handelckick: function (e) {

            $(e.target).children('.select-list').fadeIn(100);
            $(e.target).parents(".newuqu-list").siblings().find('.select-list').hide()
            $(e.target).parents("li").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
            $(e.target).parents(".new-list").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix ").siblings().find('.select-list ').hide()
        },
        handelleave: function (e) {
            $(e.target).fadeOut(200)
        },
        zan: function (id) {
            var uid = getCookie('uid');
            if(uid){
                axios.post(sysurl + 'isZan?musicId=' + id + '&uid=' + uid)
                    .then(res => {
                        if (res.data.code === 0) {
                            if (res.data.data.isZan === 0) {
                                axios.post(sysurl + 'giveZan?musicId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            } else {
                                axios.post(sysurl + 'cancelZan?musicId=' + id + '&uid=' + uid)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg(res.data.message)


                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            }
                            // layer.msg(res.data.message)


                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }else {
                overy_show()
                $(".login-mask").fadeIn()
            }

        },

        sc(id, als) {
            this.scm = true
            this.muId = id;
            this.al = als;

        },
        pla(id,t) {
            this.fk = t
            this.scma = true
            this.zjId = id;

        },
        out() {
            this.scm = false
            this.scma = false
            $('.login-mask').fadeOut();
        },
        showMessageFromChild(data) {
            this.scm = data;
            this.scma = data;
        },
        showdownload: function (id, type) {
            overy_show()
            $(".down-mask").fadeIn()
            this.$emit("showdownload", id, type)
        },

        music: function (id) {
            this.$emit("music", id, event.target)
        },
        todetail: function (id) {
            // this.$router.push({path: '/musicList', query: {id: id}})

        }


    },
    watch: {
        cu: function (val, oldval) {
            var formdata = new FormData();
            var that = this;
            formdata.append('albumId', that.id);
            formdata.append('showCount', 15);
            formdata.append('currentPage', val);

            axios.post(sysurl + 'findIdGetMusicList', formdata).then(res => {
                if (res.data.code === 0) {
                    that.data = res.data.data.list

                }
            });
        }
    },
    template: `
    <div>
    <musicsc :muid="muId"  :video="al" v-on:muscm="showMessageFromChild" v-if="scm == true"></musicsc>
    <musicpl :zjid="zjId" :type="2" :fk="fk" v-on:muscm="showMessageFromChild" v-if="scma == true"></musicpl>
    <div class="overlay" v-if="scm == true || scma == true" @click="out" style="display: block"></div>
    					<div class="new-box">
			<div class="width1200">
				<dl class="clearfix" v-if="main != null">
					<dt class="left"><img width="220" :src="main.cover"/></dt>
					<dd class="left">
						<h2 class="color_ff">{{main.name}}</h2>
						<p class="mg_top10 color_b"><img class="vertical-align_m mg_r10" src="img/icon-myuser.png"/>{{main.secClassName}}</p>
						<p class="mg_top10 color_b">收藏量：{{main.collectionsCount}}</p>
						<div class="new-abox mg_top40">
							<a href="javascript:;" class="active"> <img src="img/icon_bf.png" />全部播放</a>
							<a href="javascript:;" v-if="type == 1" @click="sc(id,2)"> <img src="img/icon_sc.png" />收藏</a>
							<a> <img src="img/icon_pl.png" />评论</a>
							<a href="song-download.html"> <img src="img/icon_pl.png" />批量操作</a>
						</div>
					</dd>
				</dl>
			</div>
		</div> 
    	<div class="bg_ff">
    		<div class="width1200 clearfix">
    			<div class="content-left left">
    				<div class="padding_tb20 new-wuqu-list">
	    				<div class="clearfix bg_b padding_10">
			    			<p class="left">
				    			<span style="margin-left: 66px;">歌名</span>
			    		    </p>
			    		    <p class="right">
			    		    	<span>时长 </span>
			    		    	<!--<span>类型</span>-->
				    			<span>Kbps</span>
				    			<span style="margin-right: 30px;"> 音调 </span>
				    			<span style="margin-right: 145px;">更新日期</span>
			    		    </p>
			    		</div>
			    		<div v-for="(l,index) in data" class="clearfix  new-list mm">
			    			<p class="left"  style="width: 350px">
				    			<span><img width="40" height="40" class="bor_r5 vertical-align_m" :src="l.cover"></span>
				    			<span class="icon-videobtn">
				    			<img @click="music(l.id)" :id="songId+'-'+l.id"  class="vertical-align_m vertical-align_m-img" src="img/icon-zt.png">
				    			</span>
						    			<span  @click="todetail(l.id)" class="text" style="width: 225px;text-align: left">{{l.musicName}}</span>
						    </p>
						    <div class="right">
						    			<span>{{l.times}}</span>
						    			<span>{{l.speed}}</span>
						    			<span>{{l.tone}}</span>
						    			<span style="width: 125px;overflow: hidden">{{l.created}}</span>
				    			<span class="relative select-box  text-center padding_5" @click.stop="handelckick">
				    				<i class="color_ff">￥{{l.gold }}</i>
				    				<i class="absolute select-list" @mouseleave.prevent="handelleave">
				    					<a @click="zan(l.id)"><img src="img/icon-zan.png">点赞</a>
				    					<a @click="showdownload(l.id,1)"><img src="img/icon-xz.png">下载</a>
				    					<a @click="sc(l.id,0)"><img src="img/icon-start.png">收藏</a>
				    					<a  @click="pla(l.id)"><img src="img/icon-pl.png">评论</a>
				    					<a @click="pla(l.id,1)"><img src="img/icon-fk.png">反馈</a>
				    				</i>
				    			</span>
				    		</div>
			    		</div>
			    		 <div class="padding_b50">
 <div class="tcdPageCode mg_top20" id="fen"></div>
    </div>
	    		   </div>
    			    <div class="pl-box mg_top20">
    						<h3 class="font_18">评论
    						<span class="font_13 color_9 mg_left10" v-if="list.length != 0">共{{list.length}}条评论</span>
    						<span class="font_13 color_9 mg_left10" v-if="list.length == 0">共0条评论</span>
    						</h3>
    						<div class="textarea-box mg_top20 text-center ">
    							<textarea  name="" rows="" cols="" id="con" placeholder="评论评论评论评论......."></textarea>
    							<p class="mg_top20 text_right padding_lr30"><a @click="pl" href="javascript:;" class="basic_a">评论</a></p>
    						</div>
    					</div>
    					<div class="pl-list mg_tb20 padding_10">
    						<h4 class="font_16 padding_tb10 bor_b">全部评论</h4>
    						<dl v-for="l in list" class="padding_10 bor_b clearfix">
    							<dt class="left"><img class="pl-head" :src="l.HEADURL"/></dt>
    							<dd class="left width90">
    								<p>{{l.NICKNAME}}</p>
    								<p>{{l.content}}</p>
    								<div class="clearfix mg_top5">
    									<div class="left">
		    								<p class="color_9">{{l.created}}</p>
	    								</div>
	    								<div class="right">
	    									<span class="mg_r20" style="margin-right: 0"><a href="javascript:;"><img class="vertical-align_m" src="img/icon-zan.png"/> {{l.zan}}</a></span>
<!--	    									<span><a href="javascript:;"><img class="vertical-align_m" src="img/icon-pl.png"/> 23</a></span>-->
	    								</div>
    								</div>
    							</dd>
    						</dl>
    					</div>
    			</div>
    			<div class="content-right right">
    				<div class="padding_10">
    					<h4 class="font_14"><strong>简介</strong></h4>
    					<p class="lin_25" v-if="main != null">{{main.describle}}</p>
    				</div>
    			</div>
    		</div>

    	</div>
</div>
    `
});
//更多音乐人
var musicManList = Vue.component('musicManList-component', {
    data: function () {
        return {
            count: 0,
            data: [],
            cu: 1,
            today:''
        }
    },
    mounted() {
        var form = new FormData();
        var that = this;
        form.append('showCount', 20)
        form.append('currentPage', 1)
        form.append('secClassId', this.$route.query.secClassId)
        axios.post(sysurl + 'findClassIdGetAlbumLis', form).then(res => {
            if (res.data.code === 0) {
                this.data = res.data.data.list
                $("#fen").createPage({
                    pageCount: parseInt(res.data.data.totalPage),
                    current: parseInt(res.data.data.currentPage),
                    backFn: function (p) {
                        that.cu = p
                    }
                });

            }
        })

        let date = new Date();
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        this.today = y.toString() + '-' + MM + '-' + d


    },
    watch: {
        cu: function (val, oldval) {
            var form = new FormData();
            var that = this;
            form.append('showCount', 20)
            form.append('currentPage', val)
            axios.post(sysurl + 'findClassIdGetAlbumLis', form).then(res => {
                if (res.data.code === 0) {
                    that.data = res.data.data.list
                }
            })
        }
    },
    methods: {
        img: function (e) {
            if (index != this.dl) {
                $(e.target).find('.vertical-align_m').attr('src', 'img/icon-bf.png');
                $(e.target).attr('src', 'img/icon-bf.png');
                $(e.target).parents('.mm').siblings().find('.vertical-align_m-img').attr('src', 'img/icon-zt.png');

                $(".play-footer").fadeIn(200)

                this.dl = index
            } else {
                $(e.target).find('.vertical-align_m').attr('src', 'img/icon-zt.png');
                $(e.target).attr('src', 'img/icon-zt.png');
                this.dl = -1;
                $(".play-footer").fadeOut(200)

            }
        },
        changetab: function (type) {
            this.$emit("changetab", type);
        }
    },
    template: `<div class="bg_ff">
    <div class="width1200">
    <h4 class="tittle padding_10 bor_b">
    <img width="30" class="vertical-align_m mg_r10" src="img/index-tittleimg.png">
    <strong class="blue font_16">全<span class="color_00">部</span></strong> 
    <strong class="color_b">all</strong>
    </h4>
    <div id="taoqu" class="taoqu-box clearfix padding_b50 video-boss">
    <dl style="display: inline-block;vertical-align: middle;" class="music-list" v-for="da in data">
<router-link :to="'/taoquDetail?id='+da.id+'&type=1'" class="width100">
<dt class="relative">
<!--<span class="needpay" v-if="da.is_pay == 1">付费</span>-->
<!--    				            <span class="needpay" v-if="da.is_pay == 2">VIP下载</span>-->
<img :src="da.cover"><p class="absolute muisc-nums">歌曲数量: <span class="blue">{{da.musicCount}}</span></p></dt>
<dd class="padding_10 bg_ff">
<h4 class="font_16">{{da.name}}</h4>
<p class="mg_top10" :class="{'red':da.last_edit_time==today,'':da.last_edit_time!=today}">最后更新日期：{{da.last_edit_time}}</p></dd>
</router-link>
</dl>
<b style="display: block;clear: both"></b>
    </div>
       <div class="padding_b50">
 <div class="tcdPageCode mg_top20" id="fen"></div>
    </div>
    </div>
    </div>`
});

//商城
var Component = Vue.component('mall-component', {
    data: function () {
        return {
            count: 0,
            bannerList: [],
            device: [],
            audit: []
        }
    },
    mounted() {
        var that = this
        $(function () {
            $(".tcdPageCode").createPage({
                pageCount: 30,
                current: 1,
                backFn: function (p) {
                    //console.log(p);
                }
            });

        });


        axios.post(sysurl2 + 'goods/main').then(res => {
            if (res.data.code === 0) {
                this.bannerList = res.data.bannerList;
                this.device = res.data.device;
                this.audit = res.data.audit
            }
        })
        // axios.post(sysurl2 + 'goods/search').then(res => {
        //     if (res.data.code === 0) {
        //
        //     }
        // })


        $(".select-box").click(function () {
            $(this).children('.select-list').fadeIn(200);
            $(this).parents(".newuqu-list").siblings().find('.select-list').hide()
            $(this).parents("li").siblings().find('.select-list').hide()
            $(this).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
            $(this).parents(".new-list").siblings().find('.select-list').hide()
            $(this).parents(".clearfix ").siblings().find('.select-list ').hide()
        })
        $(".select-list").mouseleave(function () {
            $(this).fadeOut(200)
        })


    },
    methods: {
        changetab: function (type, id) {
            this.$emit("changetab", type, id);
            //console.log(id);
        }
    },
    template: `<div>
    			<banner-component :type="2"></banner-component>

    	<div class="bg_ff">
    		<div class="width1200 ">
    				<div class="mall-box1 mg_tb20" v-if="audit.length != 0">
    				<router-link :to="'/GoodsComponent?id='+audit[0].id" >
    				<img style="height: 270px" v-bind:src="audit[0].coverUrl[0]"/>
    				<p class="text_over">{{audit[0].goodName}} <i style="float: right">销量：{{audit[0].sales}}</i></p>
    				<h4 class="clearfix font_16 mg_top10">
			    					<p v-if="audit[0].IS_PREFERENTIAL == 1">
			    					价格：<s style="font-size: 12px;margin-right: 10px">￥{{audit[0].price}}</s><strong class="red">￥{{audit[0].price-audit[0].PREFERENTIAL}}</strong>
                                    </p>
                                    <p v-if="audit[0].IS_PREFERENTIAL != 1">
			    					价格：<strong class="red">￥{{audit[0].price}}</strong>
                                    </p>
			    				</h4>
    				</router-link>
    				<router-link :to="'/GoodsComponent?id='+audit[1].id" >
    				<img style="height: 270px" v-bind:src="audit[1].coverUrl[0]"/>
    					<p class="text_over">{{audit[1].goodName}} </p>
    				<h4 class="clearfix font_16 mg_top10">
			    					<p v-if="audit[1].IS_PREFERENTIAL == 1">
			    					价格：<s style="font-size: 12px;margin-right: 10px">￥{{audit[1].price}}</s><strong class="red">￥{{audit[1].price-audit[1].PREFERENTIAL}}</strong>
                                    <i style="float: right;font-size: 14px">销量：{{audit[1].sales}}</i>
                                    </p>
                                    <p v-if="audit[1].IS_PREFERENTIAL != 1">
			    					价格：<strong class="red">￥{{audit[1].price}}</strong>
			    					<i style="float: right;font-size: 14px">销量：{{audit[1].sales}}</i>
                                    </p>
			    				</h4>
    				</router-link>
    			
    			</div>
    			<div>
	    			<h4 class="padding_tb10 font_16 mg_top20">推荐商品</h4>
	    			<div class=" hot-box clearfix">
    				<dl class="bg_ff" v-for='l in audit'>
    					<router-link :to="'/GoodsComponent?id='+l.id"  style="width: 99%;border:1px solid #dfdfdf ">
			    			<dt><img v-bind:src="l.coverUrl[0]"></dt>
			    			<dd class="padding_10">
			    				<p class="text_over">{{l.goodName}}</p>
			    				<h4 class="clearfix font_16 mg_top10">
<!--			    					<strong class="left red">￥{{l.price}}</strong>-->
                                     <p v-if="l.IS_PREFERENTIAL == 1">
			    					价格：<s style="font-size: 12px;margin-right: 10px">￥{{l.price}}</s><strong class="red">￥{{l.price-l.PREFERENTIAL}}</strong>
                                    <i style="float: right;font-size: 14px">销量：{{l.sales}}</i>
                                    </p>
                                    <p v-if="l.IS_PREFERENTIAL != 1">
			    					价格：<strong class="red">￥{{l.price}}</strong>
			    					<i style="float: right;font-size: 14px">销量：{{l.sales}}</i>
                                    </p>
			    				</h4>
			    			</dd>
		    			</router-link>
		    		</dl>

    			</div>
    			</div>
    			<div>
	    			<h4 class="padding_tb10 font_16">热门物品</h4>
	    			<div class=" hot-box clearfix">
    				<dl class="bg_ff" v-for='l in device'>
    					<router-link :to="'/GoodsComponent?id='+l.id"  style="width: 99%;border:1px solid #dfdfdf ">
			    			<dt><img :src="l.coverUrl[0]"></dt>
			    			<dd class="padding_10">
			    				<p class="text_over">{{l.goodName}}</p>
			    				<h4 class="clearfix font_16 mg_top10">
			    					  <p v-if="l.IS_PREFERENTIAL == 1">
			    					价格：<s style="font-size: 12px;margin-right: 10px">￥{{l.price}}</s><strong class="red">￥{{l.price-l.PREFERENTIAL}}</strong>
                                    <i style="float: right;font-size: 14px">销量：{{l.sales}}</i>
                                    </p>
                                    <p v-if="l.IS_PREFERENTIAL != 1">
			    					价格：<strong class="red">￥{{l.price}}</strong>
			    					<i style="float: right;font-size: 14px">销量：{{l.sales}}</i>
                                    </p>
			    				</h4>
			    			</dd>
		    			</router-link>
		    		</dl>

    			</div>
    			</div>
    		</div>


    	</div>
</div>
    `
});

//商品列表
Vue.component('mall-promote-component', {
    data: function () {
        return {
            count: 0,
        }
    },
    mounted() {
        $(function () {
            $(".tcdPageCode").createPage({
                pageCount: 30,
                current: 1,
                backFn: function (p) {
                    //console.log(p);
                }
            });

        })
        $(".select-box").click(function () {
            $(this).children('.select-list').fadeIn(200);
            $(this).parents(".newuqu-list").siblings().find('.select-list').hide()
            $(this).parents("li").siblings().find('.select-list').hide()
            $(this).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
            $(this).parents(".new-list").siblings().find('.select-list').hide()
            $(this).parents(".clearfix ").siblings().find('.select-list ').hide()
        })
        $(".select-list").mouseleave(function () {
            $(this).fadeOut(200)
        })


    },
    methods: {
        changetab: function (type) {
            this.$emit("changetab", type);
        }
    },
    template: `<div>
    							<div class="width100">
			<img class="width100 banner-img " src="img/banner3.png"/>
		</div>

    	<div class="bg_ff">
    		<div class="width1200 ">
    			<div class="mg_top40 hot-box clearfix">
    				<dl class="bg_ff">
    					<a @click="changetab(13)">
			    			<dt><img src="img/img-tg.png"></dt>
			    			<dd class="padding_10">
			    				<p class="text_over">漫步者（EDIFIER）H270P 高保真入耳 式手机耳机 带麦克风</p>
			    				<h4 class="clearfix font_16 mg_top10">
			    					<strong class="left red">￥286</strong>

			    				</h4>
			    			</dd>
		    			</a>
		    		</dl>
		    		<dl class="bg_ff">
    					<a href="mall-goods.html">
			    			<dt><img src="img/img-tg.png"></dt>
			    			<dd class="padding_10">
			    				<p class="text_over">漫步者（EDIFIER）H270P 高保真入耳 式手机耳机 带麦克风</p>
			    				<h4 class="clearfix font_16 mg_top10">
			    					<strong class="left red">￥286</strong>

			    				</h4>
			    			</dd>
		    			</a>
		    		</dl>
		    		<dl class="bg_ff">
    					<a href="mall-goods.html">
			    			<dt><img src="img/img-tg.png"></dt>
			    			<dd class="padding_10">
			    				<p class="text_over">漫步者（EDIFIER）H270P 高保真入耳 式手机耳机 带麦克风</p>
			    				<h4 class="clearfix font_16 mg_top10">
			    					<strong class="left red">￥286</strong>

			    				</h4>
			    			</dd>
		    			</a>
		    		</dl>
		    		<dl class="bg_ff">
    					<a href="mall-goods.html">
			    			<dt><img src="img/img-tg.png"></dt>
			    			<dd class="padding_10">
			    				<p class="text_over">漫步者（EDIFIER）H270P 高保真入耳 式手机耳机 带麦克风</p>
			    				<h4 class="clearfix font_16 mg_top10">
			    					<strong class="left red">￥286</strong>

			    				</h4>
			    			</dd>
		    			</a>
		    		</dl>
		    		<dl class="bg_ff">
    					<a href="mall-goods.html">
			    			<dt><img src="img/img-tg.png"></dt>
			    			<dd class="padding_10">
			    				<p class="text_over">漫步者（EDIFIER）H270P 高保真入耳 式手机耳机 带麦克风</p>
			    				<h4 class="clearfix font_16 mg_top10">
			    					<strong class="left red">￥286</strong>

			    				</h4>
			    			</dd>
		    			</a>
		    		</dl>
		    		<dl class="bg_ff">
    					<a href="mall-goods.html">
			    			<dt><img src="img/img-tg.png"></dt>
			    			<dd class="padding_10">
			    				<p class="text_over">漫步者（EDIFIER）H270P 高保真入耳 式手机耳机 带麦克风</p>
			    				<h4 class="clearfix font_16 mg_top10">
			    					<strong class="left red">￥286</strong>

			    				</h4>
			    			</dd>
		    			</a>
		    		</dl>
		    		<dl class="bg_ff">
    					<a href="mall-goods.html">
			    			<dt><img src="img/img-tg.png"></dt>
			    			<dd class="padding_10">
			    				<p class="text_over">漫步者（EDIFIER）H270P 高保真入耳 式手机耳机 带麦克风</p>
			    				<h4 class="clearfix font_16 mg_top10">
			    					<strong class="left red">￥286</strong>

			    				</h4>
			    			</dd>
		    			</a>
		    		</dl>
		    		<dl class="bg_ff">
    					<a href="mall-goods.html">
			    			<dt><img src="img/img-tg.png"></dt>
			    			<dd class="padding_10">
			    				<p class="text_over">漫步者（EDIFIER）H270P 高保真入耳 式手机耳机 带麦克风</p>
			    				<h4 class="clearfix font_16 mg_top10">
			    					<strong class="left red">￥286</strong>
			    				</h4>
			    			</dd>
		    			</a>
		    		</dl>
    			</div>
    			 <div class="padding_b50">
			    	 <div class="tcdPageCode mg_top20"></div>
			    </div>
    		</div>


    	</div>
</div>
    `
});

//商品详情

var GoodsComponent = Vue.component('mall-goods-component', {
    data: function () {
        return {
            count: 0,
            data: null,
            nums: 1
        }
    },
    mounted() {
        var id = this.$route.query.id;
        $(function () {
            $(".tcdPageCode").createPage({
                pageCount: 30,
                current: 1,
                backFn: function (p) {
                    //console.log(p);
                }
            });

        });


        var formdata = new FormData();
        formdata.append('id', id)
        axios.post(sysurl2 + 'goods/view', formdata)
            .then(res => {
                if (res.data.code === 0) {
                    this.data = res.data.good;
                    var galleryThumbs = new Swiper('#lis .gallery-thumbs', {
                        spaceBetween: 10,
                        slidesPerView: 4,
                        loop: true,
                        freeMode: true,
                        loopedSlides: 5, //looped slides should be the same
                        watchSlidesVisibility: true,
                        watchSlidesProgress: true,
                        paginationClickable: true,
                        observer: true,//修改swiper自己或子元素时，自动初始化swiper
                        observeParents: true,
                    });
                    var galleryTop = new Swiper('#lis .gallery-top', {
                        spaceBetween: 10,
                        loop: true,
                        loopedSlides: 5, //looped slides should be the same
                        paginationClickable: true,
                        observer: true,//修改swiper自己或子元素时，自动初始化swiper
                        observeParents: true,
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                        thumbs: {
                            swiper: galleryThumbs,
                        },
                    });
                } else {

                }
            }, err => {

            })
            .catch((error) => {

            })


    },
    methods: {
        loc(id,num){
            if( getCookie('token')){
                window.location.href="#/payOder?id="+id+"&num="+num
            }else {
                overy_show()
                $(".login-mask").fadeIn()
            }

        },
        changetab: function (type) {
            this.$emit("changetab", type);
        },
        pay(id) {
            var num = this.nums;
            var uid = getCookie('token')
            var formdata = new FormData();
            formdata.append('goodsId', id)
            formdata.append('counts', num)
            formdata.append('token', uid)
            axios.post(sysurl2 + 'shopcart/add', formdata, {
                headers: {
                    token: uid
                }
            }).then(res => {
                if (res.data.code === 0) {
                    layer.msg(res.data.message)
                } else {
                    layer.msg(res.data.message)
                }
            }, err => {

            })
                .catch((error) => {

                })
        }
    },
    template: `<div class="goodsDetail">

    	<div class="bg_ff"  v-if="data != null">
    		<div class="width1200 ">
    			<div class="padding_tb10 bor_b mg_top20">
    			   首页&gt;<span class="blue" v-if="data != null">{{data.goodName}}</span>
    			</div>
    			<div class="mg_top40 clearfix padding_b50">
    				<div class="left goods-left" id="lis">
    					<!-- Swiper -->
						  <div class="swiper-container gallery-top">
						    <div class="swiper-wrapper">
						      <div class="swiper-slide" :style="{backgroundImage: 'url(' + data.coverUrl + ')'}"></div>
						      <div class="swiper-slide" :style="{backgroundImage: 'url(' + data.coverUrl + ')'}"></div>
						      <div class="swiper-slide" :style="{backgroundImage: 'url(' + data.coverUrl + ')'}"></div>
						    </div>
						    <!-- Add Arrows -->
						    <div class="swiper-button-next swiper-button-white"></div>
						    <div class="swiper-button-prev swiper-button-white"></div>
						  </div>
						  <div class="swiper-container gallery-thumbs">
						    <div class="swiper-wrapper">
						      <div class="swiper-slide" :style="{backgroundImage: 'url(' + data.coverUrl + ')'}"></div>
						      <div class="swiper-slide" :style="{backgroundImage: 'url(' + data.coverUrl + ')'}"></div>
						      <div class="swiper-slide" :style="{backgroundImage: 'url(' + data.coverUrl + ')'}"></div>
						    </div>
						  </div>

    				</div>
    				<div class="left goods-right" >
    					<h2><strong>{{data.goodName}}</strong></h2>
    					
    					<h4 class="mg_top20">
<!--    					<strong class="font_16 red">￥{{data.price}}</strong>-->
    					<p v-if="data.IS_PREFERENTIAL == 1">
			    					价格：<s style="font-size: 12px;margin-right: 10px">￥{{data.price}}</s><strong class="red">￥{{data.price-data.PREFERENTIAL}}</strong>
                                    </p>
                                    <p v-if="data.IS_PREFERENTIAL != 1">
			    					价格：<strong class="red">￥{{data.price}}</strong>
                                    </p>
    					</h4>
    					<p class="mg_top20">
    						<span class="relative goods-nunsbox">
    							购买数量：<input type="number" v-model="nums" name="num"  min="1" value="1" />
    							<a href="javascript:;" class="absolute icon-up"></a>
    							<a href="javascript:;"  class="absolute icon-dwon"><img src=""/></a>
    						</span>
    						<span>当前库存{{data.inventory}}件</span>
    						<i style="margin-left: 20px">销量：{{data.sales}}</i>
    					</p>

    					<p class="goods-abox mg_top40">
    						<a @click="loc(data.id,nums)">立即购买</a>
    						<a @click="pay(data.id)">加入购物车</a>
    					</p>
    					
    				</div>
    			</div>
    			<h3 style="font-size: 24px;text-align: center;margin-bottom: 35px">商品详情</h3>
                <p class="mg_top10 color_9 spsq" v-html='data.imgs'></p>

    		</div>
    	</div>
</div>
    `
});


//资讯
var info = Vue.component('info-component', {
    data: function () {
        return {
            count: 0,
            list: [],
            current:1
        }
    },
    mounted() {

        var _this = this
        var formdata = new FormData();
        formdata.append("currentPage",this.current)
        axios.post(sysurl2 + 'information/list')
            .then(res => {
                if (res.data.code === 0) {
                    this.list = res.data.data.list;
                    $("#info").createPage({
                        pageCount: parseInt(res.data.data.totalPage),
                        current: parseInt(res.data.data.currentPage),
                        backFn: function (p) {
                            _this.current = p
                            _this.$options.methods.getlist.bind(_this)()
                        }
                    });
                } else {

                }
            }, err => {

            })
            .catch((error) => {

            })


    },
    methods: {

        getlist:function(){
            var formdata = new FormData();
            formdata.append("currentPage",this.current)
            axios.post(sysurl2 + 'information/list')
                .then(res => {
                    if (res.data.code === 0) {
                        this.list = res.data.data.list;

                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })
        },


        zan: function (id) {
            var uid = getCookie('uid');
            if(uid){
                axios.post(sysurl2 + 'information/isZan?id=' + id )
                    .then(res => {
                        if (res.data.code === 0) {
                            if (res.data.isZan === 0) {
                                axios.post(sysurl2 + 'information/like?id=' + id)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg("点赞成功！")
                                            this.$options.methods.getlist.bind(this)()

                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            } else {
                                axios.post(sysurl2 + 'information/cancelLike?id=' + id)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg("取消点赞成功")
                                            this.$options.methods.getlist.bind(this)()

                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            }
                            // layer.msg(res.data.message)


                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }else {
                overy_show()
                $(".login-mask").fadeIn()
            }

        },
    },
    template: `	<div class="bg_ff">
    		<div class="width1200">
    			<h4 class=" padding_tb20 bor_b">
    				<strong class="padding_10 font_16">动态</strong>
    			</h4>
    			<div class="main  mg_tb20 list-box">
    				<div class="">
    					<div class="zx-box mg_b20" v-for="(l,item) in list" :key="item">
    						<div class="zx-top">
	    						<h3 class="font_18"><router-link :to="{ name: 'infoDetail', query: { id: l.id }}"><strong>{{l.title}}</strong></router-link></h3>
	    						<h6 class="mg_top10">{{l.createat}}</h6>
	    						<h4 class="mg_top20">{{l.des}}</h4>
    						</div>
    						<div class="img-box1 mg_tb20">
    							<img :src="l.cover"/>

    						</div>
    						<p class="mg_top20 text_right padding_lr30">
    							<a class="mg_r20" @click="zan(l.id)"><img src="img/icon-zan.png"/>{{l.like_num}}</a>
    							<router-link class="mg_left20" :to="{ name: 'infoDetail', query: { id: l.id }}"><img src="img/icon-pl.png"/>{{l.comment_num}}</router-link>
    						</p>
    					</div>
            <div class="padding_b50">
                                 <div class="tcdPageCode mg_top20" id="info"></div>
                            </div>

    				</div>
<!--    				<div class="main-left right">-->
<!--    					<div class="padding_10">-->
<!--    						<dl class="">-->
<!--	    						<dt><img class="width100" src="img/dj-img-list.png"/></dt>-->
<!--	    						<dd>-->
<!--	    							<h4 class="font_16">MV简介</h4>-->
<!--	    							<p class="mg_top10">发布时间：2018-01-10</p>-->
<!--	    							<p class="mg_top10">播放次数：201</p>-->
<!--	    							<p class="mg_top10">分类：hiphop</p>-->
<!--	    						</dd>-->
<!--	    					</dl>-->
<!--    					</div>-->
<!--    				</div>-->
    			</div>

    		</div>
    	</div>`
});
//资讯详情
var infoDetail = Vue.component('infoDetail-component', {
    data: function () {
        return {
            count: 0,
            list: [],
            comment: [],
            cid: this.$route.query.id,
            tid: this.$route.query.id,
            type: '3',
        }
    },
    filters: {
        formdata: function (val) {
            let date = new Date(val);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d;
        }
    },
    mounted() {

        var formdata = new FormData();
        formdata.append("id", this.cid);
        axios.post(sysurl2 + 'information/view', formdata)
            .then(res => {
                if (res.data.code === 0) {
                    this.list = res.data.data;
                } else {

                }
            }, err => {

            })
            .catch((error) => {

            })
        // var formdata2 = new FormData();
        // formdata2.append("tid", this.cid);
        // formdata2.append("type", 3);
        // axios.post(sysurl2 + 'comment/list', formdata2)
        //     .then(res => {
        //         if (res.data.code === 0) {
        //             this.comment = res.data.list;
        //         } else {
        //
        //         }
        //     }, err => {
        //
        //     })
        //     .catch((error) => {
        //
        //     })


    },
    methods: {
        getdetail:function(){
            var formdata = new FormData();
            formdata.append("id", this.cid);
            axios.post(sysurl2 + 'information/view', formdata)
                .then(res => {
                    if (res.data.code === 0) {
                        this.list = res.data.data;
                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })
        },
        zan: function (id) {
            var uid = getCookie('uid');
            if(uid){
                axios.post(sysurl2 + 'information/isZan?id=' + id )
                    .then(res => {
                        if (res.data.code === 0) {
                            if (res.data.isZan === 0) {
                                axios.post(sysurl2 + 'information/like?id=' + id)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg("点赞成功！")
                                            this.$options.methods.getdetail.bind(this)()

                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            } else {
                                axios.post(sysurl2 + 'information/cancelLike?id=' + id)
                                    .then(res => {
                                        if (res.data.code === 0) {
                                            layer.msg("取消点赞成功")
                                            this.$options.methods.getdetail.bind(this)()

                                        } else {

                                        }
                                    }, err => {

                                    })
                                    .catch((error) => {

                                    })
                            }
                            // layer.msg(res.data.message)


                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }else {
                overy_show()
                $(".login-mask").fadeIn()
            }

        },
    },
    template: `<div class="bg_ff">
    		 <div class="width1200">
    			<h4 class=" padding_tb20 bor_b">
    				<strong class="padding_10 font_16">动态</strong> 
    			</h4>
    			<div class="main mg_tb20 list-box">
    				<div class="">
    					<div class="zx-box">
    						<h3><a>{{list.title}}</a></h3>
    						<h6>{{list.createat}}</h6>
    						<h4 class="mg_top20" v-html="list.content"></h4>
    						<!--<div class="img-box1 mg_tb20">-->
    							<!--<img src="img/zx01.png"/>-->
    							<!--<img src="img/zx02.png"/>-->
    							<!--<img src="img/zx03.png"/>-->
    							<!--<img src="img/zx01.png"/>-->
    							<!--<img src="img/zx02.png"/>-->
    							<!--<img src="img/zx03.png"/>-->
    						<!--</div>-->
    						<p class="mg_top20 text_right">
                                <a class="mg_r20" @click="zan(list.id)"><img src="img/icon-zan.png"/>{{list.like_num}}</a>
    							<a class="mg_left20"><img src="img/icon-pl.png"/>{{list.comment_num}}</a>
    						</p>
    					</div>
    					
    					 <pinglun-component :tid="tid" :type="type"></pinglun-component>
    				
    				</div>
<!--    				<div class="main-left right">-->
<!--    					<div class="padding_10">-->
<!--    						<dl class="">-->
<!--	    						<dt><img class="width100" :src="list.cover"/></dt>-->
<!--	    						<dd>-->
<!--	    							<h4 class="font_16">{{list.des}}</h4>-->
<!--	    							<p class="mg_top10">发布时间：{{list.createat|formdata}}</p>-->
<!--	    							<p class="mg_top10">浏览次数：{{list.hot}}</p>-->
<!--&lt;!&ndash;	    							<p class="mg_top10">分类：hiphop</p>&ndash;&gt;-->
<!--	    						</dd>-->
<!--	    					</dl>-->
<!--    					</div>-->
<!--    					-->
<!--    				</div>-->
    			</div>
    		   
    		</div>
    	</div>`
}
);



//自定义音乐盒列表
var Boxlist = Vue.component('boxlist', {
    data: function () {
        return {
            count: 0,
            userBox: [],
            src: null,
            srcimg: 'img/19faa8e42339246640fa9a83dc84fa8.png',
            hide:false,
            userId:0,
            file_format:''
        }
    },
    mounted() {
        var that = this

        if(this.$route.query.userId != 0){
            var userid = this.$route.query.userId;
            this.hide=true
            this.userId=this.$route.query.userId;
        }else {
            var userid = getCookie('uid'); 
        }
      

        var form = new FormData();
        form.append('uid', userid)
        axios.post(sysurl + 'getUserDefineBoxList', form)
            .then(res => {
                if (res.data.code === 0) {
                    this.userBox = res.data.data.list;

                } else {

                }
            });
        axios.get(sysurl2+ 'sys/getPublicPic').then(res => {
            if (res.data.code === 0) {
                //
                var img= res.data.data.file_format.split('|');

                var htl=''
                for(var i=0;i<img.length;i++){
                   htl+='image/'+img[i]+','
                }
                this.file_format=htl;


            }
        })


    },
    methods: {
        ina() {
            $("#box").fadeIn(200);
            $(".overlay").show();
        },
        musBox() {
            var formdata = new FormData();
            var userid = getCookie('uid');
            console.log(this.src)
            if ($('#boxname').val() != '' && this.src != null) {
                formdata.append('uid', userid);
                formdata.append('boxName', $('#boxname').val());
                formdata.append('cover', this.src);
                axios.post(sysurl + 'addBox', formdata)
                    .then(res => {
                        if (res.data.code === 0) {
                            layer.msg(res.data.message);
                            $("#box").fadeOut(200);
                            $(".overlay").hide();
                            var form = new FormData();
                            form.append('uid', userid)
                            axios.post(sysurl + 'getUserDefineBoxList', form)
                                .then(res => {
                                    if (res.data.code === 0) {
                                        this.userBox = res.data.data.list;

                                    } else {

                                    }
                                })
                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            } else {
                layer.msg('缺少参数！')
            }

        },
        upimg() {
            var file = document.getElementById("fie").files[0];
            var formdata = new FormData()
            formdata.append('file', file);
            var that = this;
            axios.post(sysurl2 + 'upload', formdata)
                .then(res => {
                    if (res.data.code === 0) {
                        that.src = res.data.PATH
                        that.srcimg = url + res.data.PATH
                    } else {

                    }
                })
        },
        delBox(id) {
            var that = this;
            layer.confirm('确认删除？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                var uid = getCookie('uid');
                var formdata = new FormData()
                formdata.append('id', id);
                formdata.append('uid', uid);
                axios.post(sysurl + 'deleteBox', formdata)
                    .then(res => {
                        if (res.data.code === 0) {
                            layer.msg(res.data.message);
                            axios.post(sysurl + 'getUserDefineBoxList', formdata)
                                .then(res => {
                                    if (res.data.code === 0) {
                                        that.userBox = res.data.data.list;

                                    } else {

                                    }
                                })
                        } else {

                        }
                    })
            }, function(){

            });

        }
    },
    template: `	<div class="mg_top40 width1200">
	<div class="big-mask phonelogin-mask"  id="box" style="top: 15%">
<h4 class="padding_10 text-center mask-tittle color_ff font_16">添加音乐盒</h4>
<div class="text-center mask-font bor_ds">
<form action="" method="post">
<p class="inp-box" style="height: 240px;width: 240px;position: relative">
<img :src="srcimg" alt=""  style="width: 100%;height: 100%;position: relative;z-index: 10"/>
<input type="file" @change="upimg" id="fie" :accept="file_format" name="" style="position: absolute;width: 100%;height: 100%;opacity: 0;z-index: 11;top: 0;left: 0"  placeholder="请输入手机号码" />
</p>
<p class="inp-box">
<input type="text" id="boxname" name=""  value="" placeholder="请输入音乐盒名称" />
</p>

<p class="mg_top20">
<a @click="musBox" class="big-btn login-ok">提交</a>
</p>
</form>
</div>
</div>
    				<h4 class="tittle padding_10 bor_b">
    			       <strong class=" font_16">自定义音乐盒</strong> 
    			       <a style="display: inline-block;
    background: #2EB82E;
    color: #fff;
    padding: 4px 25px;
    border-radius: 5px;
    border: none;margin-left: 18px"  @click="ina" v-if="hide == false">添加音乐盒</a>
    			    </h4>
    			    <div class="music-box1 mg_top20 clearfix" >
    			    	<dl v-for="l in userBox" class="mg_b20" style="position: relative">
    			    	<a @click="delBox(l.id)" v-if="hide == false" style="position: absolute;top: 10px;right: 10px;z-index: 10"><img src="img/icon-dell1.png" alt=""></a>
    			    		<router-link  :to="'/Boxinfo?id='+l.id+'&num='+l.mediaCount+'&userId='+userId">
    			    		    <dt class="relative">
	    			    			<img :src="l.cover"/>
	    			    			<h6 class="absolute color_ff my-file ">
	    			    				<span class="left mg_left5" style="display: block;width: 45%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">歌曲数:{{l.mediaCount}}</span>
	    			    				<span class="right mg_r5" style="display: block;width: 45%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{l.createTime}}</span>
	    			    			</h6>
	    			    		</dt>
	    			    		<dd class="mg_top10 text">
	    			    			{{l.boxName}}
	    			    		</dd>
    			    		</router-link>
    			    	</dl>
    			    
    			    </div>
    			</div>`
});
// my-fouce.html
//音乐盒详情
var Boxinfo = Vue.component('boxinfo', {
    data: function () {
        return {
            boxInfo: {},
            boxlist: [],
            num: 0,
            dl: -1,
            cu: 1,
            id: 0,
            scma: false,
            zjId: 0,
            fk:'',
            songId:this.$route.query.id,
            hide:false
        }
    },
    watch: {
        cu: function (val, oldval) {
            var that = this
            var form = new FormData();
            form.append('id', this.id)
            form.append('boxId', this.id)
            form.append('showCount', 15);
            form.append('currentPage', val)
            axios.post(sysurl + 'getBoxMediaList', form)
                .then(res => {
                    if (res.data.code === 0) {
                        this.boxlist = res.data.data.list;

                    } else {

                    }
                })
        }
    },
    mounted() {
        var that = this;
        if(this.$route.query.userId != 0){
            var userid = this.$route.query.userId;
            this.hide=true
        }else {
            var userid = getCookie('uid');
        }
        this.num = this.$route.query.num
        this.id = this.$route.query.id
        var form = new FormData();
        form.append('id', this.$route.query.id)
        form.append('boxId', this.$route.query.id)
        form.append('showCount', 15)
        form.append('currentPage', 1)
        axios.post(sysurl + 'getBoxInfo', form)
            .then(res => {
                if (res.data.code === 0) {
                    that.boxInfo = res.data.data
                } else {

                }
            });
        axios.post(sysurl + 'getBoxMediaList', form)
            .then(res => {
                if (res.data.code === 0) {
                    this.boxlist = res.data.data.list;
                    $("#fen").createPage({
                        pageCount: parseInt(res.data.data.totalPage),
                        current: parseInt(res.data.data.currentPage),
                        backFn: function (p) {
                            that.cu = p
                        }
                    });
                } else {

                }
            })

    },
    methods: {
        pla(id,t) {
            this.fk = t
            this.scma = true;
            this.zjId = id;

        },
        img: function (e, index) {
            if (index != this.dl) {
                $(e.target).find('.vertical-align_m').attr('src', 'img/icon-bf.png');
                $(e.target).attr('src', 'img/icon-bf.png');
                $(e.target).parents('.mm').siblings().find('.vertical-align_m-img').attr('src', 'img/icon-zt.png');

                $(".play-footer").fadeIn(200)

                this.dl = index
            } else {
                $(e.target).find('.vertical-align_m').attr('src', 'img/icon-zt.png');
                $(e.target).attr('src', 'img/icon-zt.png');
                this.dl = -1;
                $(".play-footer").fadeOut(200)

            }

            // if(src[e]=='img/icon-zt.png'){
            //     for(var i=0;i<src.length;i++){
            //         Vue.set(this.src, i,'img/icon-zt.png')
            //     }
            //     Vue.set(this.src, e,'img/icon-bf.png')
            // }else {
            //     Vue.set(this.src, e,'img/icon-zt.png')
            // }
        },
        handelckick: function (e) {

            $(e.target).children('.select-list').fadeIn(100);
            $(e.target).parents(".newuqu-list").siblings().find('.select-list').hide()
            $(e.target).parents("li").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix.mg_b20").siblings().find('.select-list').hide()
            $(e.target).parents(".new-list").siblings().find('.select-list').hide()
            $(e.target).parents(".clearfix ").siblings().find('.select-list ').hide()
        },
        handelleave: function (e) {
            $(e.target).fadeOut(200)
        },
        zan: function (id) {
            var uid = getCookie('uid')
            if(uid){ axios.post(sysurl + 'isZan?musicId=' + id + '&uid=' + uid)
                .then(res => {
                    if (res.data.code === 0) {
                        if (res.data.data.isZan === 0) {
                            axios.post(sysurl + 'giveZan?musicId=' + id + '&uid=' + uid)
                                .then(res => {
                                    if (res.data.code === 0) {
                                        layer.msg(res.data.message)


                                    } else {

                                    }
                                }, err => {

                                })
                                .catch((error) => {

                                })
                        } else {
                            axios.post(sysurl + 'cancelZan?musicId=' + id + '&uid=' + uid)
                                .then(res => {
                                    if (res.data.code === 0) {
                                        layer.msg(res.data.message)


                                    } else {

                                    }
                                }, err => {

                                })
                                .catch((error) => {

                                })
                        }
                        // layer.msg(res.data.message)


                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })}else {
                overy_show()
                $(".login-mask").fadeIn()
            }

        },
        del(id, mediaId) {
            var that = this;
            layer.confirm('确认移除？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                var userid = getCookie('uid');
                var form = new FormData();
                var formdata = new FormData();
                form.append('uid', userid)
                form.append('delId', id)
                form.append('mediaId', mediaId);

                formdata.append('id', that.id)
                formdata.append('boxId', that.id)
                formdata.append('showCount', 15)
                // window.open(sysurl + 'download?musicId='+id+'&uid='+data.uid)
                axios.post(sysurl + 'removeMediaFromBox', form)
                    .then(res => {
                        if (res.data.code === 0) {
                            layer.msg(res.data.message)
                            axios.post(sysurl + 'getBoxMediaList', formdata)
                                .then(res => {
                                    if (res.data.code === 0) {
                                        that.boxlist = res.data.data.list;
                                        $("#fen").createPage({
                                            pageCount: parseInt(res.data.data.totalPage),
                                            current: parseInt(res.data.data.currentPage),
                                            backFn: function (p) {
                                                that.cu = p
                                            }
                                        });
                                    } else {

                                    }
                                })


                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }, function(){

            });

        },
        showMessageFromChild(data) {
            this.scma = data;
        },
        out() {
            this.scma = false
        },
        showdownload: function (id, type) {
            overy_show()
            $(".down-mask").fadeIn()
            this.$emit("showdownload", id, type)
        },

        music: function (id) {
            this.$emit("music", id, event.target)
        },
        todetail: function (id) {
            // this.$router.push({path: '/musicList', query: {id: id}})

        },
        allplay:function () {
            if($("#all"+this.songId).length>0){
                $($("#all"+this.songId)[0]).find(".vertical-align_m").click()

            }
        }
    },
    template: `<div> 
    <musicpl :zjid="zjId" :type="2" :fk="fk" v-on:muscm="showMessageFromChild" v-if="scma == true"></musicpl>
    <div class="overlay" v-if="scma == true" @click="out" style="display: block"></div>
    <div class="new-box">

        <div class="bg-cover" :style="{backgroundImage: 'url(' +boxInfo.cover+ ')' }"></div>
        <div class="width1200">
            <dl class="clearfix" v-if="boxInfo != null">
                <dt class="left"><img width="220" :src="boxInfo.cover"/></dt>
                <dd class="left">
                    <h2 class="color_ff">{{boxInfo.boxName}}</h2>
                    <p class="mg_top10">
                        <span class="color_b mg_r20">歌曲：{{num}}首</span>
                        <span class="color_b mg_left20">更新时间：{{boxInfo.updateTimeBox}}</span>
                    </p>
                    <div class="new-abox mg_top40">
                        <a href="javascript:;" class="active" @click="allplay"> <img src="img/icon_bf.png"/>全部播放</a>
                    </div>
                </dd>
            </dl>
        </div>
    </div>
    <div class="bg_ff">
        <div class="width1200">
            <h4 class="tittle padding_10 bor_b">
                <img width="30" class="vertical-align_m mg_r10" src="img/index-tittleimg.png">
                <strong class="blue font_16">全 <span class="color_00">部</span></strong>
                <strong class="color_b">all</strong>
            </h4>
            <div class="padding_tb20 new-wuqu-list song">
                <div class="clearfix bg_b padding_tb10">
                  <p class="left">
			    			<span style="margin-left: 76px;">歌名</span>
		    		    </p>
		    		   <p class="right">
		    		   
		    		    	<span>分类</span>
			    			<span>BPM</span>
			    			<span> KEY </span>
			    			<span style="margin-right: 228px;">更新日期</span>
		    		    </p>
                </div>
                <div v-for="(l,index) in boxlist" class="clearfix new-list">
                    <p class="left " style="display: flex;align-items: center">
<!--                        <span><img width="40" height="40" class="bor_r5 vertical-align_m" :src="l.mediaCover"></span>-->
                        <span class="over-player"><img width="40" height="40" class="bor_r5 vertical-align_m" :src="l.mediaCover"/>
		    				 <span class="icon-videobtn" :id="'all'+songId"><img :id="songId+'-'+l.mediaId" class="vertical-align_m" src="img/icon-zt.png" @click="music(l.mediaId)"/></span>
		    			</span>
                        <span class="text name" @click="todetail(l.id)"><span class="musicname">{{l.mediaName}}</span>
			    			<span class="musictag" v-if="l.independent == 1"><img src="img/dubo.png" alt=""></span>
			    			<span class="musictag" v-if="l.is_pay == 1"><img src="img/fufei.png" alt=""></span>
			    			</span>
                    </p>
                    <div class="right">
                        <span>{{l.className}}</span>
                        <span>{{l.speed}}</span>
                        <span>{{l.tone}}</span>
                        <span>{{l.mediaTime}}</span>
                        <span class="relative select-box  text-center padding_5" @click.stop="handelckick">
\t\t\t\t    \t\t\t\t<i class="color_ff">￥{{l.gold }}</i>
\t\t\t\t    \t\t\t\t<i class="absolute select-list" @mouseleave.prevent="handelleave">
\t\t\t\t    \t\t\t\t\t<a @click="zan(l.mediaId)"><img src="img/icon-zan.png">点赞</a>
\t\t\t\t    \t\t\t\t\t<a @click="showdownload(l.mediaId,1)"><img src="img/icon-xz.png">下载</a>
                                        <!--\t\t\t\t    \t\t\t\t\t<a @click="sc(l.id)"><img src="img/icon-start.png">收藏</a>-->
\t\t\t\t    \t\t\t\t\t<a href="javascript:;" @click="pla(l.mediaId)"><img src="img/icon-pl.png">评论</a>
\t\t\t\t    \t\t\t\t\t<a href="javascript:;" @click="pla(l.mediaId,1)"><img
                                                src="img/icon-fk.png">反馈</a>
\t\t\t\t    \t\t\t\t</i>
\t\t\t\t    \t\t\t</span>
                        <span class="dell-sc mg_left20" @click.stop="del(l.id,l.mediaId)"
                              v-if="hide == false">移除收藏</span>
                    </div>
                </div>
            </div>
            <div class="padding_b50">
                <div class="tcdPageCode mg_top20" id="fen"></div>
            </div>
        </div>
    </div>
</div>`
});

//我的主页

var My = Vue.component('my-component', {
    data: function () {
        return {
            count: 0,
            users: null,
            userBox: [],
            vip: null,
            userSc: [],
            src: null,
            srcimg: '',
            userBoxl: 0,
            pp: false,
            txs: false,
            hide:false,
            userId:0,
            file_format:'',
            text:[]
        }
    },
    mounted() {
        var that = this;
        if(this.$route.query.userId){
            this.hide=true;
            this.userId=this.$route.query.userId
            var form=new FormData();
            form.append('USER_ID',this.$route.query.userId)
            axios.post(sysurl2 + 'user/atherUser',form)
                .then(res => {
                    if (res.data.code === 0) {
                        this.users = res.data.data;
                    } else {
                        layer.msg(res.data.message)
                    }
                }, err => {

                })
                .catch((error) => {

                });
            var forms = new FormData();
            forms.append('uid', this.$route.query.userId)
            axios.post(sysurl + 'getUserDefineBoxList', forms)
                .then(res => {
                    if (res.data.code === 0) {
                        this.userBox = res.data.data.list;
                        for (var i = 0; i < res.data.data.list.length; i++) {
                            this.userBoxl += parseInt(res.data.data.list[i].mediaCount)
                        }
                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })

            axios.post(sysurl + 'getBoxList', forms)
                .then(res => {
                    if (res.data.code === 0) {
                        that.userSc = res.data.data.list

                    }
                }, err => {

                })
                .catch((error) => {

                })
        }
        else {
            $(function () {
                $(".tx-a").click(function () {
                    overy_show()
                    $(".tx-mask").fadeIn(200)
                })
                //vip
                var swiper = new Swiper('.vip .swiper-container', {
                    loop: true,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                        renderBullet: function (index, className) {
                            return '<span class="' + className + '"></span>';
                        },
                    },
                })
                // 充值
                var swiper = new Swiper('.recharge .swiper-container', {
                    loop: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                        renderBullet: function (index, className) {
                            return '<span class="' + className + '"></span>';
                        },
                    },
                })
            })

            var userid = getCookie('uid');
            axios.post(sysurl2 + 'user/info')
                .then(res => {
                    if (res.data.code === 0) {
                        this.users = res.data.USER;
                        var form = new FormData();
                        form.append('VIP_ID', res.data.USER.VIP)
                        axios.post(sysurl2 + 'vip/vipInfoById', form)
                            .then(ress => {
                                if (ress.data.code === 0) {
                                    this.text = ress.data.data;

                                } else {

                                }
                            });
                        // this.vip = 'img/leave' + res.data.USER.VIPLEVEL + '.png'
                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                });
            var form = new FormData();
            form.append('uid', userid)
            axios.post(sysurl + 'getUserDefineBoxList', form)
                .then(res => {
                    if (res.data.code === 0) {
                        this.userBox = res.data.data.list;
                        for (var i = 0; i < res.data.data.list.length; i++) {
                            this.userBoxl += parseInt(res.data.data.list[i].mediaCount)
                        }
                    } else {

                    }
                }, err => {

                })
                .catch((error) => {

                })

            axios.post(sysurl + 'getBoxList', form)
                .then(res => {
                    if (res.data.code === 0) {
                        that.userSc = res.data.data.list

                    }
                }, err => {

                })
                .catch((error) => {

                });
            axios.get(sysurl2+ 'sys/getPublicPic').then(res => {
                if (res.data.code === 0) {
                    //
                    var img= res.data.data.file_format.split('|');

                    var htl=''
                    for(var i=0;i<img.length;i++){
                        htl+='image/'+img[i]+','
                    }
                    this.file_format=htl;


                }
            })
        }

    },
    methods: {
        changetab: function (type) {
            this.$emit("changetab", type);
        },
        ttx() {
            this.txs = true
        },
        upload() {
            var file = document.getElementById("file").files[0];
            var formdata = new FormData();
            formdata.append('file', file);
            var that = this;
            axios.post(sysurl2 + 'upload', formdata)
                .then(res => {
                    if (res.data.code === 0) {
                        var form = new FormData();
                        form.append('HEADURL', res.data.PATH)
                        axios.post(sysurl2 + 'user/updateAppUser', form)
                            .then(res => {
                                if (res.data.code === 0) {
                                    layer.msg(res.data.message);
                                    axios.post(sysurl2 + 'user/info')
                                        .then(res => {
                                            if (res.data.code === 0) {
                                                this.users = res.data.USER;
                                                location.reload();
                                            } else {

                                            }
                                        });
                                } else {

                                }
                            })
                    } else {

                    }
                })
        },
        out() {
            this.pp = false
            this.txs = false
        },
        ops() {
            this.pp = true
        },
        oo(data){
            this.pp = data
            this.txs = data
        }

    },
    watch:{
        $route(to,from){
            var that = this;
            if(this.$route.query.userId){
                this.hide=true;
                this.userId=this.$route.query.userId
                var form=new FormData();
                form.append('USER_ID',this.$route.query.userId)
                axios.post(sysurl2 + 'user/atherUser',form)
                    .then(res => {
                        if (res.data.code === 0) {
                            this.users = res.data.data;
                        } else {
                            layer.msg(res.data.message)
                        }
                    }, err => {

                    })
                    .catch((error) => {

                    });
                var forms = new FormData();
                forms.append('uid', this.$route.query.userId)
                axios.post(sysurl + 'getUserDefineBoxList', forms)
                    .then(res => {
                        if (res.data.code === 0) {
                            this.userBox = res.data.data.list;
                            for (var i = 0; i < res.data.data.list.length; i++) {
                                this.userBoxl += parseInt(res.data.data.list[i].mediaCount)
                            }
                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })

                axios.post(sysurl + 'getBoxList', forms)
                    .then(res => {
                        if (res.data.code === 0) {
                            that.userSc = res.data.data.list

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })
            }else {
                this.hide=false;
                $(function () {
                    $(".tx-a").click(function () {
                        overy_show()
                        $(".tx-mask").fadeIn(200)
                    })
                    //vip
                    var swiper = new Swiper('.vip .swiper-container', {
                        loop: true,
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                            renderBullet: function (index, className) {
                                return '<span class="' + className + '"></span>';
                            },
                        },
                    })
                    // 充值
                    var swiper = new Swiper('.recharge .swiper-container', {
                        loop: true,
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                            renderBullet: function (index, className) {
                                return '<span class="' + className + '"></span>';
                            },
                        },
                    })
                })

                var userid = getCookie('uid');
                axios.post(sysurl2 + 'user/info')
                    .then(res => {
                        if (res.data.code === 0) {
                            this.users = res.data.USER;
                            var form = new FormData();
                            form.append('VIP_ID', res.data.USER.VIP)
                            axios.post(sysurl2 + 'vip/vipInfoById', form)
                                .then(ress => {
                                    if (ress.data.code === 0) {
                                        this.text = ress.data.data;

                                    } else {

                                    }
                                });
                            // this.vip = 'img/leave' + res.data.USER.VIPLEVEL + '.png'
                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    });
                var form = new FormData();
                form.append('uid', userid)
                axios.post(sysurl + 'getUserDefineBoxList', form)
                    .then(res => {
                        if (res.data.code === 0) {
                            this.userBox = res.data.data.list;
                            for (var i = 0; i < res.data.data.list.length; i++) {
                                this.userBoxl += parseInt(res.data.data.list[i].mediaCount)
                            }
                        } else {

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    })

                axios.post(sysurl + 'getBoxList', form)
                    .then(res => {
                        if (res.data.code === 0) {
                            that.userSc = res.data.data.list

                        }
                    }, err => {

                    })
                    .catch((error) => {

                    });
                axios.get(sysurl2+ 'sys/getPublicPic').then(res => {
                    if (res.data.code === 0) {
                        //
                        var img= res.data.data.file_format.split('|');

                        var htl=''
                        for(var i=0;i<img.length;i++){
                            htl+='image/'+img[i]+','
                        }
                        this.file_format=htl;


                    }
                })
            }
            console.log(this.hide)
        }
    },
    template: `<div class="bg_ff padding_b50 my-page">
            <vippay @hid="oo" v-if="pp==true" :info="users"></vippay>
            <viptx v-if="txs==true" :info="users" @muscm="out"></viptx>
            <div class="overlay" style="display: block"  v-if="pp==true || txs == true" @click="out"></div>
    		<div class="width1200" v-if="users != null">
    			<div class="my-top mg_top40">
    				<dl class="clearfix">
    					<dt class="relative left">
    						<img :src="users.HEADURL"/>
    						<label v-if="hide == false" style="background: #2EB82E" for="file" class="my-file absolute color_ff">点击更换图片</label>
    						<input v-if="hide == false" type="file" :accept="file_format" name="file" id="file" value="" @change="upload" hidden="hidden" />
    					</dt>
    					<dd class="left bor_b padding_tb10" style="border-bottom: 0">
    						<h4 class=" " style="    padding: 10px 0;">
    							<span v-if="users.NICKNAME != ''">{{users.NICKNAME}}</span>
    							<span v-if="users.NICKNAME == ''">--</span>
    							<b style="color:#ED7E2F"><i style="display: inline-block;border: 1px solid #2EB82E;padding: 5px;font-size: 12px;color: #2EB82E;border-radius: 5px;margin-left: 8px;margin-right: 8px">{{users.GROUPNAME}}</i>{{users.VIPNAME}}</b>
    							<span v-if="users.VIPLEVEL != 0" style="margin-left: 5px">到期时间：{{users.ENDTIME}}</span>
    							<img width="20" v-if="users.GENDER == 2" class="vertical-align_m mg_r10" src="img/icon-woman.png"/>
    							<img width="20" v-if="users.GENDER == 1" class="vertical-align_m mg_r10" src="img/icon-man.png"/>
    							
    						</h4>
    						<p class="mg_top10 my-abox" v-if="hide == true" style="margin-top: 0!important;padding-top: 10px;border-top:1px solid #dfdfdf">
    							<router-link :to="'/myNews?userId='+userId" class="tx-a" id="txbut" style="background: none;border: 1px solid #BFBFBF; color: #555" >发私信</router-link>
    						</p>
    						<p class="mg_top10" v-if="hide == false">
    							<span v-if="users.FOCUS">关注：{{users.FOCUS}}</span>
    							<span v-if="!users.FOCUS">关注：0</span>
    							<a href="javascript:;" class="basic_a mg_left20" @click="ops" >充值</a> 
    							<span class="mg_left20" v-if="users.GROUPNAME == '超级VIP'">VIP剩余下载量：{{users.DOWNLOADS}}</span>
    						</p>
    						<p class="mg_top10 my-abox" v-if="hide == false">
    							<span>余额：{{users.GOLD}}金币</span>
    							<span class="mg_left20 mg_r20">积分：{{users.CREDIS}}分</span>
    							<a class="tx-a" id="txbut" @click="ttx">提现</a>
    						</p>
    						<p class="mg_top10" v-if="hide == false">
    							<span class="mg_r20">年龄：{{users.AGE}}</span>
    							<span class="mg_r20">星座：{{users.CONSTELLATION}}</span>
    							<span class="mg_r20"  v-if="users.ADDRESS != ''">所在地：{{users.ADDRESS}}</span>
    							<span class="mg_r20"  v-if="users.ADDRESS == ''">所在地：--</span>
    						</p>
    						<p class="mg_top10">简介：{{users.SIGN}}</p>
    					</dd>
    				</dl>
    			</div>
<!--    			<div class="mg_top40">-->
<!--    				<h4 class="tittle padding_10 bor_b">-->
<!--    			       <strong class=" font_16">我的收藏</strong> -->
<!--    			    </h4>-->
<!--    			    <div class="music-box1 mg_top20 clearfix" >-->
<!--    			    	<dl v-for="l in userBox" class="mg_b20">-->
<!--    			    		<a href="my-fouce.html">-->
<!--    			    		    <dt class="relative">-->
<!--	    			    			<img :src="l.cover"/>-->
<!--	    			    			<h6 class="absolute color_ff my-file ">-->
<!--	    			    				<span class="left mg_left5" style="display: block;width: 45%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">歌曲数:{{l.mediaCount}}</span>-->
<!--	    			    				<span class="right mg_r5" style="display: block;width: 45%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{l.createTime}}</span>-->
<!--	    			    			</h6>-->
<!--	    			    		</dt>-->
<!--	    			    		<dd class="mg_top10 text">-->
<!--	    			    			{{l.boxName}}-->
<!--	    			    		</dd>-->
<!--    			    		</a>-->
<!--    			    	</dl>-->
<!--    			    -->
<!--    			    </div>-->
<!--    			</div>-->
    			<div class="mg_top40">
    				<h4 class="tittle padding_10 bor_b">
    			       <strong class=" font_16"  v-if="hide == false">我的音乐盒({{userSc.length}})</strong> 
    			       <strong class=" font_16"  v-if="hide == true">他的音乐盒({{userSc.length}})</strong> 
    			    </h4>
    			    <div class="music-box1 mg_top20 clearfix" >
    			    
    			    	
    			    	
    			    	<!--收藏的套曲-->
    			    	<dl v-for="l in userSc"  class="mg_b20">
    			    		<router-link v-if="l.boxType == 3 || l.boxType == 2" :to="'/myZj?id='+l.id+'&num='+l.mediaCount+'&name='+l.boxName">
	    			    		<dt class="relative">
	    			    			<img :src="l.cover"/>
	    			    			<h6 class="absolute color_ff my-file ">
	    			    				<span class="left mg_left5" style="display: block;width: 45%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">歌曲数:{{l.mediaCount}}</span>
	    			    				<span class="right mg_r5" style="display: block;width: 45%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{l.updateTimeBox}}</span>
	    			    			</h6>
	    			    		</dt>
	    			    		<dd class="mg_top10 text">
	    			    			<p>{{l.boxName}}</p>
	    			    		</dd>
    			    		</router-link>
    			    		<router-link :to="'/myVideo?id='+l.id+'&num='+l.mediaCount+'&name='+l.boxName" v-if="l.boxType == 1">
	    			    		<dt class="relative">
	    			    			<img :src="l.cover"/>
	    			    			<h6 class="absolute color_ff my-file ">
	    			    				<span class="left mg_left5" style="display: block;width: 45%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">歌曲数:{{l.mediaCount}}</span>
	    			    				<span class="right mg_r5" style="display: block;width: 45%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{l.updateTimeBox}}</span>
	    			    			</h6>
	    			    		</dt>
	    			    		<dd class="mg_top10 text">
	    			    			<p>{{l.boxName}}</p>
<!--	    			    			<p class="mg_top10">{{l.mediaCount }}</p>-->
	    			    			
	    			    		</dd>
    			    		</router-link>
<!--    			    		<router-link :to="'/myZj?id='+l.id+'&num='+l.mediaCount" v-if="l.boxType == 2">-->
<!--	    			    		<dt class="relative">-->
<!--	    			    			<img :src="l.cover"/>-->
<!--	    			    			<h6 class="absolute color_ff my-file ">-->
<!--	    			    				<span class="left mg_left5" style="display: block;width: 45%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">歌曲数:{{l.mediaCount}}</span>-->
<!--	    			    				<span class="right mg_r5" style="display: block;width: 45%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{l.createTime}}</span>-->
<!--	    			    			</h6>-->
<!--	    			    		</dt>-->
<!--	    			    		<dd class="mg_top10 text">-->
<!--	    			    			<p>{{l.boxName}}</p>-->
<!--&lt;!&ndash;	    			    			<p class="mg_top10">{{l.mediaCount }}</p>&ndash;&gt;-->
<!--	    			    		</dd>-->
<!--    			    		</router-link>-->
    			    		<router-link :to="'/Boxlist?userId='+userId"  v-if="l.boxType == 0">
	    			    		<dt class="relative">
	    			    			<img :src="l.cover"/>
	    			    			<h6 class="absolute color_ff my-file ">
	    			    				<span class="left mg_left5" style="display: block;width: 45%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">歌曲数:{{l.mediaCount}}</span>
	    			    				<span class="right mg_r5" style="display: block;width: 45%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{l.createTime}}</span>
	    			    			</h6>
	    			    		</dt>
	    			    		<dd class="mg_top10 text">
	    			    			<p>{{l.boxName}}</p>
	    			    		
	    			    		</dd>
    			    		</router-link>
    			    	
    			    	</dl>
    			           <dl>
    			           	<router-link to="/myVipupload">
	    			    		<dt class="relative">
	    			    			<img src="img/zx01.png"/>
<!--	    			    			<h6 class="absolute color_ff my-file ">-->
<!--	    			    				<span class="left mg_left5" style="display: block;width: 45%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">歌曲数:{{l.mediaCount}}</span>-->
<!--	    			    				<span class="right mg_r5" style="display: block;width: 45%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{l.createTime}}</span>-->
<!--	    			    			</h6>-->
	    			    		</dt>
	    			    		<dd class="mg_top10 text">
	    			    			<p>我的上传</p>
	    			    		
	    			    		</dd>
    			    		</router-link>
</dl>
    			    </div>
    			</div>
    		</div>
		</div>`
});

//我的消息
Vue.component('newsList-component', {
    data: function () {
        return {
            count: 0,
            loginInfo:{},
            listeners:{},
            options:{},
            SessionItem:[],
            selType:webim.SESSION_TYPE.C2C, //当前聊天类型
            selToID:null, //当前选中聊天id（当聊天类型为私聊时，该值为好友帐号，否则为群号）
            selSess:null, //当前聊天会话对象
            childshow:false,
            news:false,
            detail:{},
            content:"",
            nickname:'',
            adminurl:'img/logo1.png'
        }
    },
    filters: {
        formdata: function (val) {
            let date = new Date(val*1000);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d;
        }
    },
    props:["thiscount"],
    watch:{
        "thiscount":function () {

            if(this.thiscount>0){

                this.news = false
                this.$options.methods.getlist.bind(this)()
            }
        }
    },
    mounted() {

        var _this = this

        axios.post(sysurl2 + 'user/info')
            .then(res => {
                if (res.data.code === 0) {

                    axios.post(sysurl2 + 'im/getSig')
                        .then(resq => {
                            if (resq.data.code === 0) {
                                //当前用户身份

                                this.loginInfo = {
                                    'sdkAppID': '1400240094', //用户所属应用id,必填
                                    // 'accountType': accountType, //用户所属应用帐号类型, 已废弃
                                    'identifier': getCookie("uid"), //当前用户ID,必须是否字符串类型，必填
                                    'userSig': getCookie("sign"),
                                    // 'userSig': resq.data.sign,
                                    //当前用户身份凭证，必须是字符串类型，必填
                                    'identifierNick': null, //当前用户昵称，不用填写，登录接口会返回用户的昵称，如果没有设置，则返回用户的id
                                    'headurl': res.data.USER.HEADURL //当前用户默认头像，选填，如果设置过头像，则可以通过拉取个人资料接口来得到头像信息
                                };

                                //监听事件
                                this.listeners = {
                                    "onConnNotify": onConnNotify//监听连接状态回调变化事件，选填
                                    ,"jsonpCallback": jsonpCallback//IE9（含）以下浏览器用到的 jsonp 回调函数
                                    ,"onMsgNotify": onMsgNotify//监听新消息（私聊，普通群（非直播聊天室）消息，全员推送消息）事件，必填
                                    // ,"onBigGroupMsgNotify": onBigGroupMsgNotify//监听新消息（直播聊天室）事件，直播场景下必填
                                    // ,"onKickedEventCall" : onKickedEventCall//被其他登录实例踢下线
                                    // ,"onC2cEventNotifys": onC2cEventNotifys//监听 C2C 系统消息通道
                                };
                                var isAccessFormalEnv = true; //是否访问正式环境
                                var isLogOn = false; //是否开启sdk在控制台打印日志
                                //初始化时，其他对象，选填
                                this.options = {
                                    'isAccessFormalEnv': isAccessFormalEnv, //是否访问正式环境，默认访问正式，选填
                                    'isLogOn': isLogOn //是否开启控制台打印日志,默认开启，选填
                                }
                                var onConnNotify = function (resp) {
                                    var info;
                                    switch (resp.ErrorCode) {
                                        case webim.CONNECTION_STATUS.ON:
                                            webim.Log.warn('建立连接成功: ' + resp.ErrorInfo);
                                            break;
                                        case webim.CONNECTION_STATUS.OFF:
                                            info = '连接已断开，无法收到新消息，请检查下您的网络是否正常: ' + resp.ErrorInfo;
                                            alert(info);
                                            webim.Log.warn(info);
                                            break;
                                        case webim.CONNECTION_STATUS.RECONNECT:
                                            info = '连接状态恢复正常: ' + resp.ErrorInfo;
                                            alert(info);
                                            webim.Log.warn(info);
                                            break;
                                        default:
                                            webim.Log.error('未知连接状态: =' + resp.ErrorInfo);
                                            break;
                                    }
                                };
                                //IE9（含）以下浏览器用到的 jsonp 回调函数
                                function jsonpCallback(rspData) {
                                    //设置 jsonp 返回的
                                    webim.setJsonpLastRspData(rspData);
                                }

                                //监听新消息事件

                                var dateStart = null;
                                var dateEnd = null;
//newMsgList 为新消息数组，结构为[Msg]
                                function onMsgNotify(newMsgList) {
                                    //console.warn(newMsgList);
                                    var sess, newMsg;
                                    //获取所有聊天会话
                                    var sessMap = webim.MsgStore.sessMap();

                                    for (var j in newMsgList) { //遍历新消息
                                        newMsg = newMsgList[j];

                                        if (!_this.selToID) { //没有聊天对象, selToID 为全局变量，表示当前正在进行的聊天 id，当聊天类型为私聊时，该值为好友帐号，否则为群号。
                                            _this.selToID = newMsg.getSession().id();
                                            _this.selType = newMsg.getSession().type();
                                            _this.selSess = newMsg.getSession();
                                            var headUrl;
                                            if (_this.selType == webim.SESSION_TYPE.C2C) {
                                                // headUrl = friendHeadUrl;
                                            } else {
                                                // headUrl = groupHeadUrl;
                                            }
                                            // addSess(this.selType, this.selToID, newMsg.getSession().name(), headUrl, 0, 'sesslist', newMsg); //新增一个对象
                                            // setSelSessStyleOn(this.selToID);
                                        }
                                        if (newMsg.getSession().id() == _this.selToID) { //为当前聊天对象的消息
                                            //在聊天窗体中新增一条消息
                                            //console.warn(newMsg);
                                            // addMsg(newMsg);
                                        }
                                        _this.$options.methods.getlist.bind(_this)()
                                    }
                                    //消息已读上报，以及设置会话自动已读标记
                                    // webim.setAutoRead(selSess, true, true);

                                    // for (var i in sessMap) {
                                    //     sess = sessMap[i];
                                    //     // 更新demo 维护的recentSessMap的MsgGroupReadedSeq字段
                                    //     if(sess._impl && sess._impl.curMaxMsgSeq){
                                    //         recentSessMap[i] = {};
                                    //         recentSessMap[i].MsgGroupReadedSeq = sess._impl.curMaxMsgSeq;
                                    //     }
                                    //     if (this.selToID != sess.id()) { //更新其他聊天对象的未读消息数
                                    //         if (!dateStart) {
                                    //             dateStart = new Date();
                                    //         }
                                    //         updateSessDiv(sess.type(), sess.id(), sess.name(), sess.unread());
                                    //         console.debug(sess.id(), sess.unread());
                                    //         dateEnd = new Date();
                                    //     }
                                    // }
                                }



//消息已读通知
//                                 function onMsgReadedNotify(notify) {
//                                     var sessMap = webim.MsgStore.sessMap()[webim.SESSION_TYPE.C2C + notify.From_Account];
//                                     if (sessMap) {
//                                         var msgs = _.clone(sessMap.msgs());
//                                         var rm_msgs = _.remove(msgs, function (m) {
//                                             return m.time <= notify.LastReadTime
//                                         });
//                                         var unread = sessMap.unread() - rm_msgs.length;
//                                         unread = unread > 0 ? unread : 0;
//                                         //更新sess的未读数
//                                         sessMap.unread(unread);
//                                         // console.debug('更新C2C未读数:',notify.From_Account,unread);
//                                         //更新页面的未读数角标
//
//                                         if (unread > 0) {
//                                             $("#badgeDiv_" + notify.From_Account).text(unread).show();
//                                         } else {
//                                             $("#badgeDiv_" + notify.From_Account).val("").hide();
//                                         }
//                                     }
//                                 }
//                                 //监听 C2C 消息通道的处理，方法在 receive_new_msg.js 文件中
//                                 var onC2cEventNotifys = {
//                                     "92": onMsgReadedNotify,//消息已读通知
//                                 };


                                this.$options.methods.webimLogin.bind(this)()


                            } else {

                            }
                        })

                } else {

                }
            }, err => {

            })
            .catch((error) => {

            })





    },
    methods: {
        webimLogin:function () {
            var _this = this
            webim.login(
                _this.loginInfo, _this.listeners, _this.options,
                function (resp) {
                    // this.loginInfo.identifierNick = resp.identifierNick;//设置当前用户昵称
                    _this.$options.methods.getlist.bind(_this)()
                },
                function (err) {
                    alert(err.ErrorInfo);
                }
            );
        },
        getlist:function () {
            var _this = this
            var options = {
                'Count': 10 //要拉取的最近会话条数
            };
            webim.getRecentContactList(options,function(resp){
                //业务处理
                _this.SessionItem = resp.SessionItem
                console.log(resp);
            },function(resp){
                console.log(resp);
            });
        },
        messageDetail:function (selToID,type,head,name) {
            this.news = true
            this.detail.selToID = selToID
            this.detail.type = type
            this.detail.toheader = head
            this.nickname = name
            
        },
        sendMsg:function (detail) {
            //发送消息(文本或者表情)
                var _this = this
                if (!detail.selToID) {    // selToID 为全局变量，表示当前正在进行的聊天 ID，当聊天类型为私聊时，该值为好友帐号，否则为群号。
                    alert("您还没有选中好友或者群组，暂不能聊天");
                    _this.content = ''
                    return;
                }
                //获取消息内容
                var msgtosend = _this.content
                var msgLen = webim.Tool.getStrBytes(msgtosend);
                if (msgtosend.length < 1) {
                    alert("发送的消息不能为空!");
                    return;
                }
                var maxLen, errInfo;
                if (_this.selType == webim.SESSION_TYPE.C2C) {
                    maxLen = webim.MSG_MAX_LENGTH.C2C;
                    errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
                } else {
                    maxLen = webim.MSG_MAX_LENGTH.GROUP;
                    errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
                }
                if (msgLen > maxLen) {
                    alert(errInfo);
                    return;
                }
                if (!_this.selSess) {
                    var  selSess = new webim.Session(_this.selType, detail.selToID, detail.selToID, detail.toheader, Math.round(new Date().getTime() / 1000));
                }
                var isSend = true;//是否为自己发送
                var seq = -1;//消息序列，-1表示 IM SDK 自动生成，用于去重
                var random = Math.round(Math.random() * 4294967296);//消息随机数，用于去重
                var msgTime = Math.round(new Date().getTime() / 1000);//消息时间戳
                var subType;//消息子类型
                if (_this.selType == webim.SESSION_TYPE.C2C) {
                    subType = webim.C2C_MSG_SUB_TYPE.COMMON;
                } else {
                    //webim.GROUP_MSG_SUB_TYPE.COMMON-普通消息,
                    //webim.GROUP_MSG_SUB_TYPE.LOVEMSG-点赞消息，优先级最低
                    //webim.GROUP_MSG_SUB_TYPE.TIP-提示消息(不支持发送，用于区分群消息子类型)，
                    //webim.GROUP_MSG_SUB_TYPE.REDPACKET-红包消息，优先级最高
                    subType = webim.GROUP_MSG_SUB_TYPE.COMMON;
                }
                var msg = new webim.Msg(selSess, isSend, seq, random, msgTime, _this.loginInfo.identifier, subType, _this.loginInfo.identifierNick);
                var text_obj, face_obj, tmsg, emotionIndex, emotion, restMsgIndex;
                //解析文本和表情
                var expr = /\[[^[\]]{1,3}\]/mg;
                var emotions = msgtosend.match(expr);
                if (!emotions || emotions.length < 1) {
                    text_obj = new webim.Msg.Elem.Text(msgtosend);
                    msg.addText(text_obj);
                } else {
                    for (var i = 0; i < emotions.length; i++) {
                        tmsg = msgtosend.substring(0, msgtosend.indexOf(emotions[i]));
                        if (tmsg) {
                            text_obj = new webim.Msg.Elem.Text(tmsg);
                            msg.addText(text_obj);
                        }
                        emotionIndex = webim.EmotionDataIndexs[emotions[i]];
                        emotion = webim.Emotions[emotionIndex];
                        if (emotion) {
                            face_obj = new webim.Msg.Elem.Face(emotionIndex, emotions[i]);
                            msg.addFace(face_obj);
                        } else {
                            text_obj = new webim.Msg.Elem.Text(emotions[i]);
                            msg.addText(text_obj);
                        }
                        restMsgIndex = msgtosend.indexOf(emotions[i]) + emotions[i].length;
                        msgtosend = msgtosend.substring(restMsgIndex);
                    }
                    if (msgtosend) {
                        text_obj = new webim.Msg.Elem.Text(msgtosend);
                        msg.addText(text_obj);
                    }
                }
                webim.sendMsg(msg, function (resp) {
                    if (_this.selType == webim.SESSION_TYPE.C2C) {//私聊时，在聊天窗口手动添加一条发的消息，群聊时，长轮询接口会返回自己发的消息
                        _this.$options.methods.getlist.bind(_this)()
                    }
                    webim.Tool.setCookie("tmpmsg_" + detail.selToID, '', 0);
                _this.content = ''
                    // turnoffFaces_box();
                }, function (err) {
                    alert(err.ErrorInfo);
                    _this.content = ''
                });
        }
    },
    template: `<div>
                    <!--私信-->
    				<div class="danqu-box active padding_lr10" >
    					<h4 class="padding_10 font_16 vip-tittle"> <strong>私信</strong><span v-if="news">&gt;{{nickname}}</span></h4>
    					<div class="vip-box1 mg_top20">
    						<dl class="clearfix padding_10 bor_b" v-for="l in SessionItem" v-if="l.To_Account != 'RNBDJadmin'&&!news" @click="messageDetail(l.To_Account,l.Type,l.C2cImage,l.C2cNick)">
    							<dt class="left"><img :src="l.C2cImage"/></dt>
    							<dd class="left width90">
    								<div class="clearfix">
    									<div class="left">
    										<h4>{{l.C2cNick}}</h4>
    								        <p class="mg_top5 color_b">{{l.LastMsg.MsgBody[0].MsgContent.Text}}</p>
    									</div>
    									<div class="right">
    										<span class="mg_top10 color_b">{{l.MsgTimeStamp|formdata}}</span>
    									</div>
    								</div>
    							</dd>
    						</dl>
    						
    					<newsDetail-component v-if="news&&detail.selToID!='RNBDJadmin'" :detail="detail" :SessionItem="SessionItem"></newsDetail-component>
    					</div>
    					
	    			</div>
	    			<!--通知-->
	    			<div class="danqu-box  padding_lr10">
    					<h4 class="padding_10 font_16 vip-tittle"> <strong>通知</strong></h4>
    					<div class="vip-box1 mg_top20">
    						<dl class="clearfix padding_10 bor_b" v-for="l in SessionItem" v-if="l.To_Account == 'RNBDJadmin'&&!news" @click="messageDetail(l.To_Account,l.Type,adminurl,l.To_Account)">
    							<dt class="left"><img :src="adminurl"/></dt>
    							<dd class="left width90">
    								<div class="clearfix">
    									<div class="left">
    										<h4>{{l.To_Account}}</h4>
    								        <p class="mg_top5 color_b">{{l.LastMsg.MsgBody[0].MsgContent.Text}}</p>
    									</div>
    									<div class="right">
    										<span class="mg_top10 color_b">{{l.MsgTimeStamp|formdata}}</span>
    									</div>
    								</div>
    							</dd>
    						</dl>
    				    <newsDetail-component v-if="news&&detail.selToID=='RNBDJadmin'" :detail="detail" :SessionItem="SessionItem"></newsDetail-component>
    					</div>
    					</div>
    					<!--发送消息-->
    					 
    						<textarea name="" id="newssendbox" rows="10" v-if="news" @keyup.enter="sendMsg(detail)" v-model="content"></textarea>
    						<button class="sendButton" v-if="news" @click="sendMsg(detail)">发送</button>
    						</div>`
                     
});
//消息详情
Vue.component("newsDetail-component",{
    data: function () {
        return {
            count: 0,
            reqMsgCount:15,
            lastMsgTime:0,
            msgKey:'',
            MsgList:'',
            myheader:$("#myheader")[0].src

        }
    },
    filters:{
//把消息转换成 HTML

        formdata: function (val) {
            let date = new Date(val*1000);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? ('0' + MM) : MM;
            let d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            let m = date.getMinutes();
            m = m < 10 ? ('0' + m) : m;
            let s = date.getSeconds();
            s = s < 10 ? ('0' + s) : s;
            return y + '-' + MM + '-' + d + ' ' + h + ':' + m;
        }
    },
    props:["detail",'SessionItem'],
    watch:{
        "SessionItem":function () {
            var _this = this
            //获取最新的 C2C 历史消息,用于切换好友聊天，重新拉取好友的聊天消息

            var getPrePageC2CHistroyMsgInfoMap = {}
            var getLastC2CHistoryMsgs = function (cbOk, cbError) {
                if (_this.detail.type == webim.SESSION_TYPE.GROUP) {
                    alert('当前的聊天类型为群聊天，不能进行拉取好友历史消息操作');
                    return;
                }
                var lastMsgTime = 0;//第一次拉取好友历史消息时，必须传0
                var msgKey = '';
                var options = {
                    'Peer_Account': _this.detail.selToID, //好友帐号，selToID 为全局变量，表示当前正在进行的聊天 ID，当聊天类型为私聊时，该值为好友帐号，否则为群号。
                    'MaxCnt': _this.reqMsgCount, //拉取消息条数
                    'LastMsgTime': _this.lastMsgTime, //最近的消息时间，即从这个时间点向前拉取历史消息
                    'MsgKey':_this.msgKey
                };
                webim.getC2CHistoryMsgs(
                    options,
                    function (resp) {
                        var complete = resp.Complete;//是否还有历史消息可以拉取，1表示没有，0表示有
                        var retMsgCount = resp.MsgCount;//返回的消息条数，小于或等于请求的消息条数，小于的时候，说明没有历史消息可拉取了
                        if (resp.MsgList.length == 0) {
                            webim.Log.error("没有历史消息了:data=" + JSON.stringify(options));
                            return;
                        }
                        getPrePageC2CHistroyMsgInfoMap[_this.detail.selToID] = {//保留服务器返回的最近消息时间和消息 Key，用于下次向前拉取历史消息
                            'LastMsgTime': resp.LastMsgTime,
                            'MsgKey': resp.MsgKey,
                            // _this.lastMsgTime:resp.LastMsgTime,
                            // _this.msgKey:resp.MsgKey
                        };
                        if (cbOk)
                            cbOk(resp.MsgList);
                    },
                    cbError
                );
            };
            getLastC2CHistoryMsgs(getlist,cbError)
            function getlist(list) {
                _this.MsgList = list

                setTimeout(function() {
                    $(".news-box")[0].scrollTop = $(".news-box")[0].scrollHeight;
                }, 100);         }
            function cbError() {
                console.log('1');
            }
        }
    },
    mounted() {
        var _this = this
        //获取最新的 C2C 历史消息,用于切换好友聊天，重新拉取好友的聊天消息

        var getPrePageC2CHistroyMsgInfoMap = {}
        var getLastC2CHistoryMsgs = function (cbOk, cbError) {
            if (_this.detail.type == webim.SESSION_TYPE.GROUP) {
                alert('当前的聊天类型为群聊天，不能进行拉取好友历史消息操作');
                return;
            }
            var lastMsgTime = 0;//第一次拉取好友历史消息时，必须传0
            var msgKey = '';
            var options = {
                'Peer_Account': _this.detail.selToID, //好友帐号，selToID 为全局变量，表示当前正在进行的聊天 ID，当聊天类型为私聊时，该值为好友帐号，否则为群号。
                'MaxCnt': _this.reqMsgCount, //拉取消息条数
                'LastMsgTime': _this.lastMsgTime, //最近的消息时间，即从这个时间点向前拉取历史消息
                'MsgKey':_this.msgKey
            };
            webim.getC2CHistoryMsgs(
                options,
                function (resp) {
                    var complete = resp.Complete;//是否还有历史消息可以拉取，1表示没有，0表示有
                    var retMsgCount = resp.MsgCount;//返回的消息条数，小于或等于请求的消息条数，小于的时候，说明没有历史消息可拉取了
                    if (resp.MsgList.length == 0) {
                        webim.Log.error("没有历史消息了:data=" + JSON.stringify(options));
                        return;
                    }
                    getPrePageC2CHistroyMsgInfoMap[_this.detail.selToID] = {//保留服务器返回的最近消息时间和消息 Key，用于下次向前拉取历史消息
                        'LastMsgTime': resp.LastMsgTime,
                        'MsgKey': resp.MsgKey,
                        // _this.lastMsgTime:resp.LastMsgTime,
                        // _this.msgKey:resp.MsgKey
                    };
                    if (cbOk)
                        cbOk(resp.MsgList);
                },
                cbError
            );
        };
        getLastC2CHistoryMsgs(getlist,cbError)
        function getlist(list) {
            _this.MsgList = list

            setTimeout(function() {
                $(".news-box")[0].scrollTop = $(".news-box")[0].scrollHeight;
            }, 100);
        }
        function cbError() {
            console.log('1');
        }

    },
    methods: {
        convertMsgtoHtml:function (msg) {
            var html = "", elems, elem, type, content;
            elems = msg;//获取消息包含的元素数组
            var count = elems.length;
            for (var i in elems) {
                elem = elems[i];
                type = elem.getType();//获取元素类型
                content = elem.getContent();//获取元素对象

                switch (type) {
                    case webim.MSG_ELEMENT_TYPE.TEXT:
                        var eleHtml = convertTextMsgToHtml(content);
                        //转义，防XSS
                        html += webim.Tool.formatText2Html(eleHtml);
                        break;
                    case webim.MSG_ELEMENT_TYPE.FACE:
                        html += convertFaceMsgToHtml(content);
                        break;
                    case webim.MSG_ELEMENT_TYPE.IMAGE:
                        if (i <= count - 2) {
                            var customMsgElem = elems[i + 1]; //获取保存图片名称的自定义消息elem
                            var imgName = customMsgElem.getContent().getData(); //业务可以自定义保存字段，demo中采用data字段保存图片文件名
                            html += convertImageMsgToHtml(content, imgName);
                            i++; //下标向后移一位
                        } else {
                            html += convertImageMsgToHtml(content);
                        }
                        break;
                    case webim.MSG_ELEMENT_TYPE.SOUND:
                        // html += convertSoundMsgToHtml(content);
                        html += convertSoundMsgToAMRPlayer(content);
                        break;
                    case webim.MSG_ELEMENT_TYPE.FILE:
                        html += convertFileMsgToHtml(content);
                        break;
                    case webim.MSG_ELEMENT_TYPE.LOCATION:
                        html += convertLocationMsgToHtml(content);
                        break;
                    case webim.MSG_ELEMENT_TYPE.CUSTOM:
                        var eleHtml = convertCustomMsgToHtml(content);
                        //转义，防XSS
                        html += webim.Tool.formatText2Html(eleHtml);
                        break;
                    case webim.MSG_ELEMENT_TYPE.GROUP_TIP:
                        var eleHtml = convertGroupTipMsgToHtml(content);
                        //转义，防XSS
                        html += webim.Tool.formatText2Html(eleHtml);
                        break;
                    default:
                        webim.Log.error('未知消息元素类型: elemType=' + type);
                        break;
                }
            }
            return html;
        },

    },
    template: `<div class="news-box">
    						<dl class="clearfix padding_10 newsboxlist" v-for="l in MsgList" :class="l.isSend?'jusright':''">
    							<dt class="left" v-if="!l.isSend"><img :src="detail.toheader"/></dt>
    							<dd class="left newsleft" v-if="!l.isSend" v-html="convertMsgtoHtml(l.elems)">
    							
    							</dd>
    							<span class="msgtimel" v-if="!l.isSend">{{l.time|formdata}}</span>
    						
    							<span class="msgtimer" v-if="l.isSend">{{l.time|formdata}}</span>
    							<dd class="right newsright" v-if="l.isSend" v-html="convertMsgtoHtml(l.elems)">
    						
    							</dd>
    							<dt class="right" v-if="l.isSend"><img :src="myheader"/></dt>
    							
    						</dl>
    						
    						
    					

    					</div> `
})
//我的消息
var mynews = Vue.component('message-component', {
    data: function () {
        return {
            count: 0,
            isdetail:false,
            thiscount:0


        }
    },

    mounted() {
        var _this = this
        $(".aside-box").on('click', 'li', function () {
            var index = $(this).index();
            $(this).addClass("active").siblings().removeClass("active");
            $(".main-right .danqu-box").eq(index).addClass("active").siblings().removeClass("active");
            _this.thiscount++
        })





    },
    methods: {
        changeshow:function (type) {
            
        }

    },
    template: `<div class="bg_ff mg_top40">
    		<div class="main clearfix">
    			<h4 class="tittle padding_10 bor_b mg_b20">
    				<img width="30" class="vertical-align_m mg_r10" src="img/index-tittleimg.png">
    				<strong class="blue font_16">我的 <span class="color_00">消息</span></strong> 
    				<strong class="color_b">my news</strong>
    			</h4>
    			<div class="left main-left vip-box">
    				<ul class="aside-box">
    					<li class="active"><a href="javascript:;"><i class="vip-icon new-icon1 mg_top5"></i>私信</a></li>
    					<li ><a href="javascript:;"><i class="vip-icon new-icon2"></i>通知</a></li>
    				</ul>
    			</div>
    			
    			<div class="right main-right">
    				<newsList-component @changeshow="changeshow" :thiscount="thiscount"></newsList-component>
    				
    			</div>
	    	</div>
    	</div>`
});


//个人设置

var userSet = Vue.component('set-component', {

    components: {setTime, arrs},
    data: function () {
        return {
            count: 0,
            url: null,
            urlimg: 'img/19faa8e42339246640fa9a83dc84fa8.png',
            urla: null,
            urlaimg: 'img/19faa8e42339246640fa9a83dc84fa8.png',
            user: null,
            sex: 0,
            defultAddress: {
                sheng: '陕西省',
                shi: '',
                qu: '',
                di: ''
            },
            birthday: '',
            address: '',
            ban: false,
            banx: false,
            bank: [],
            number: null,
            name: null,
            bk: null,
            bkid: 0,
            banklist: [],
            file_format:''
        }
    },

    mounted() {
        axios.post('js/bank.json')
            .then(res => {
                this.bank = res.data.data;
            });
        axios.post(sysurl2 + 'user/getBankList')
            .then(res => {
                if (res.data.code === 0) {
                    this.banklist = res.data.data;
                }

            })
        $(".goods-tab").on("click", '.cut', function () {
            var nums = $(this).siblings('input').val();
            nums--;
            if (nums <= 1) {
                nums = 1
            }
            $(this).siblings('input').val(nums);
        })
        $(".goods-tab").on("click", '.add', function () {
            var nums = $(this).siblings('input').val();
            nums++;
            $(this).siblings('input').val(nums);
        })

        var formdata = new FormData();
        var token = getCookie('token')
        axios.post(sysurl2 + 'user/info')
            .then(res => {
                if (res.data.code === 0) {
                    this.user = res.data.USER;

                    var ar = res.data.USER.ADDRESS.split('-');
                    console.log(ar[2])
                    this.defultAddress.sheng = ar[0];
                    this.defultAddress.shi = ar[1];
                    this.defultAddress.qu = ar[2];
                    this.defultAddress.di = ar[3];
                    this.urlimg = res.data.USER.ALIPAY_RECEIPT_CODE;
                    this.url = res.data.USER.ALIPAY_RECEIPT_CODE;
                    this.urlaimg = res.data.USER.WEIXIN_RECEIPT_CODE;
                    this.urla = res.data.USER.WEIXIN_RECEIPT_CODE;

                } else {

                }
            }, err => {

            })
            .catch((error) => {

            });

        axios.get(sysurl2+ 'sys/getPublicPic').then(res => {
            if (res.data.code === 0) {
                //
                var img= res.data.data.file_format.split('|');

                var htl=''
                for(var i=0;i<img.length;i++){
                    htl+='image/'+img[i]+','
                }
                this.file_format=htl;


            }
        })

    },
    methods: {
        dateChange(obj) {
            this.birthday = obj.year + '-' + obj.month + '-' + obj.day
        },
        handelckick: function (e, id) {
            var rdio = $(e.target).is(':checked');

            if (rdio == true) {
                $(e.target).attr("checked", true);
                $(e.target).parent('.radio-list').find('img').attr("src", 'img/rideo-select.png')
                $(e.target).parent('.radio-list').siblings().find(' img').attr("src", 'img/rideo.png')
                $(e.target).parent('.radio-list').siblings().find('input').attr("checked", false)
            } else {
                $(e.target).attr("checked", false);
                $(e.target).parent('.radio-list').find('img').attr("src", 'img/rideo.png')
            }
            this.sex = id
        },
        changetab: function (type) {
            this.$emit("changetab", type);
        },
        card() {
            this.number = null;
            this.name = null;
            this.bk = null;
            this.bkid = null;
            this.ban = true;

        },
        upload() {
            var file = document.getElementById("pay-code").files[0];
            var formdata = new FormData();
            formdata.append('file', file);
            var that = this;
            axios.post(sysurl2 + 'upload', formdata)
                .then(res => {
                    if (res.data.code === 0) {
                        that.url = res.data.PATH
                        that.urlimg = url + res.data.PATH
                    } else {

                    }
                })
        },
        uploada() {
            var file = document.getElementById("wx-code").files[0];
            var formdata = new FormData();
            formdata.append('file', file);
            var that = this;
            axios.post(sysurl2 + 'upload', formdata)
                .then(res => {
                    if (res.data.code === 0) {
                        that.urla = res.data.PATH
                        that.urlaimg = url + res.data.PATH
                    } else {

                    }
                })
        },
        sub() {

            var formdata = new FormData();
            var address = this.defultAddress.sheng + '-' + this.defultAddress.shi + '-' + this.defultAddress.qu + '-' + $('#di').val();
            if($('#name').val() != null && $('#name').val() != ''){
                formdata.append('NICKNAME', $('#name').val())
                formdata.append('SIGN', $('#js').val())
                formdata.append('GENDER', this.sex);
                formdata.append('BIRTHDAY', this.birthday);
                formdata.append('ADDRESS', address);
                if(this.url != this.urlimg){
                    formdata.append('ALIPAY_RECEIPT_CODE', this.url);
                }
                if(this.urla != this.urlaimg){
                    formdata.append('WEIXIN_RECEIPT_CODE', this.urla);
                }

                axios.post(sysurl2 + 'user/updateAppUser', formdata)
                    .then(res => {
                        if (res.data.code === 0) {
                            layer.msg(res.data.message);
                        } else {

                        }
                    })
            }else {
                layer.msg('昵称不能为空！');
            }

        },
        out() {
            this.ban = false
            this.banx = false
        },
        ed(id, bank, number, name) {
            this.banx = true;
            this.number = number;
            this.name = name;
            this.bk = bank;
            this.bkid = id;
        },
        submit() {
            if (this.number != null && this.name != null && this.bk != null) {
                var formdata = new FormData();
                formdata.append('NAME', this.name);
                formdata.append('CARDNUM', this.number);
                formdata.append('BANK', this.bk);
                axios.post(sysurl2 + 'user/addBankInfo', formdata)
                    .then(res => {
                        if (res.data.code === 0) {
                            layer.msg(res.data.message);
                            this.ban = false;
                            axios.post(sysurl2 + 'user/getBankList')
                                .then(res => {
                                    if (res.data.code === 0) {
                                        this.banklist = res.data.data;
                                    }

                                })
                        } else {
                            layer.msg(res.data.message);
                        }
                    })

            } else {
                layer.msg('缺少参数！')
            }
        },
        edx() {
            var formdata = new FormData();
            formdata.append('NAME', this.name);
            formdata.append('CARDNUM', this.number);
            formdata.append('BANK', this.bk);
            formdata.append('MEMBERACCOUNT_ID', this.bkid);
            axios.post(sysurl2 + 'user/editBankInfo', formdata)
                .then(res => {
                    if (res.data.code === 0) {
                        layer.msg(res.data.message);
                        this.banx = false;
                        axios.post(sysurl2 + 'user/getBankList')
                            .then(res => {
                                if (res.data.code === 0) {
                                    this.banklist = res.data.data;
                                }

                            })
                    } else {
                        layer.msg(res.data.message);
                    }
                })


        },
        del(id) {
            var that = this;
            layer.confirm('确认删除？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                var formdata = new FormData();
                formdata.append('MEMBERACCOUNT_ID', id);
                axios.post(sysurl2 + 'user/deleteBankInfo', formdata)
                    .then(res => {
                        if (res.data.code === 0) {
                            layer.msg(res.data.message);
                            axios.post(sysurl2 + 'user/getBankList')
                                .then(res => {
                                    if (res.data.code === 0) {
                                        that.banklist = res.data.data;
                                    }

                                })
                        } else {
                            layer.msg(res.data.message);
                        }
                    })
            }, function(){

            });

        }
    },
    template: `		<div class="bg_ff">
		
\t\t<div class="mask card-box" style="display: block" v-if="ban==true">
\t\t\t<h4 class="padding_10 text-center mask-tittle color_ff">添加银行卡</h4>
\t\t\t<div class=" mask-form">
\t\t\t\t<form action="" method="post">
\t\t\t\t\t<p class="inp-box mg_top10">
\t\t\t\t\t\t<label for="">银行卡卡号：</label>
\t\t\t\t\t\t<input type="number" name="" v-model="number" value="" placeholder="请输入银行卡卡号" />
\t\t\t\t\t</p>
\t\t\t\t\t<p class="inp-box mg_top10">
\t\t\t\t\t\t<label for="">持卡人姓名：</label>
\t\t\t\t\t\t<input type="text" name=""  value="" v-model="name" placeholder="请输入持卡人姓名" />
\t\t\t\t\t</p>
\t\t\t\t\t<p class="inp-box mg_top10">
\t\t\t\t\t\t<label for="">所属银行：</label>
\t\t\t\t\t\t<input type="text" name=""  value="" v-model="bk" placeholder="请输入银行名称" />
\t\t\t\t\t</p>
\t\t\t\t\t<p class="mg_top20 text-center">
\t\t\t\t\t\t<a  class="basic_a" @click="submit">确定</a>
\t\t\t\t\t</p>
\t\t\t\t</form>
\t\t\t</div>
\t\t</div>
<div class="mask card-box" style="display: block" v-if="banx==true">
\t\t\t<h4 class="padding_10 text-center mask-tittle color_ff">修改银行卡</h4>
\t\t\t<div class=" mask-form">
\t\t\t\t<form action="" method="post">
\t\t\t\t\t<p class="inp-box mg_top10">
\t\t\t\t\t\t<label for="">银行卡卡号：</label>
\t\t\t\t\t\t<input type="number" name="" v-model="number" value="" placeholder="请输入银行卡卡号" />
\t\t\t\t\t</p>
\t\t\t\t\t<p class="inp-box mg_top10">
\t\t\t\t\t\t<label for="">持卡人姓名：</label>
\t\t\t\t\t\t<input type="text" name=""  value="" v-model="name" placeholder="请输入持卡人姓名" />
\t\t\t\t\t</p>
\t\t\t\t\t<p class="inp-box mg_top10">
\t\t\t\t\t\t<label for="">所属银行：</label>
\t\t\t\t\t\t<input type="text" name=""  value="" v-model="bk" placeholder="请输入银行名称" />
\t\t\t\t\t</p>
\t\t\t\t\t<p class="mg_top20 text-center">
\t\t\t\t\t\t<a  class="basic_a" @click="edx">确定</a>
\t\t\t\t\t</p>
\t\t\t\t</form>
\t\t\t</div>
\t\t</div>
<div class="overlay" style="display: block" v-if="ban==true || banx == true" @click="out"></div>
    		<div class="width1200 " v-if="user != null">
    			<div class="padding_tb10 bor_b mg_top20 font_18">个人设置</div>
    			<form action="" method="post" class="padding_10">
    				<div class="mg_top10 order-inp">
						<span>昵称：</span>
						<input type="text" name=""  id="name" v-model="user.NICKNAME" value="" placeholder="请输入昵称" />
    					
    				</div>
    				<div class="mg_top10 order-inp">
    					<span>介绍：</span>
    					<textarea name="" rows="" cols="" id="js" v-model="user.SIGN" placeholder="输入您的个人介绍"></textarea>
    				</div>
    				<div class="mg_top10 order-inp sex-box">
    					<span>性别：</span>
    					<span class="radio-list" @click.stop="handelckick($event,1)">
    						<label for="man"> 
    						<img class="vertical-align_m mg_r10"  v-if=" user.GENDER != 1 " src="img/rideo.png"/>
    						<img class="vertical-align_m mg_r10"  v-if=" user.GENDER == 1 " src="img/rideo-select.png"/>男
    						</label>
    						
    						<input type="radio" checked="checked" v-if="user.GENDER == 1 " name="sex" hidden="hidden" id="man" value="" />
    						<input type="radio"  v-if="user.GENDER != 1 " name="sex" hidden="hidden" id="man" value="" />
    					</span>
    					<span class="radio-list" @click.stop="handelckick($event,2)" >
    						<label for="woman">
    						<img class="vertical-align_m mg_r10"  v-if=" user.GENDER != 2 " src="img/rideo.png"/>
    						<img class="vertical-align_m mg_r10"  v-if=" user.GENDER == 2 " src="img/rideo-select.png"/>女</label>
    				
    						<input type="radio" name="sex" hidden="hidden" id="woman" value="" v-if=" user.GENDER == 2 " checked="checked"  />
    						<input type="radio" name="sex" hidden="hidden" id="woman" value="" v-if=" user.GENDER != 2 "   />
    					</span>
    				</div>
    				<setTime :time="user.BIRTHDAY"></setTime>
    				<arrs v-model="defultAddress"></arrs>
    				<div class="mg_top10 order-inp">
						<span>地区：</span>
						<input type="text" name="" id="di"  v-model="defultAddress.di" placeholder="请输入详细地址" />
    					
    				</div>
    				<div class="mg_top10 order-inp card">
    					<span>绑定提现账号：</span>
    					<span>
    						支付宝二维码上传：
    						<label   for="pay-code">选择文件</label>
    						<input  @change="upload" type="file" :accept="file_format" hidden="hidden" name="" id="pay-code" value="" />
    					</span>
    					<p style="padding-left: 100px;">
    					<img width="100px" v-if="urlimg != ''" :src="urlimg"/>
    					<img width="100px" v-if="urlimg == ''" src="img/19faa8e42339246640fa9a83dc84fa8.png"/>
    					</p>
    					<br />
    					<span class="mg_top10" style="padding-left: 100px;">
    						微信二维码上传：
    						<label for="wx-code">更换二维码</label>
    						<input  @change="uploada" type="file"  :accept="file_format" hidden="hidden"  name="" id="wx-code" value="" />
    					</span><br />
    					<p style="padding-left: 100px;"><img width="100px" v-if="urlaimg != ''" :src="urlaimg"/>
    					<img width="100px" v-if="urlaimg == ''" src="img/19faa8e42339246640fa9a83dc84fa8.png"/></p>
    					<span class="mg_top10" style="padding-left: 100px;">
    						添加银行卡：
    						<label class="addcard" @click="card">添加银行卡</label>
    						<!--<input type="file"hidden="hidden" name="" id="idcard" value="" />-->
    					</span>
    					<table class="tpd">
    					    <tr>
    					    <th>银行名称</th>
    					    <th>银行卡号</th>
    					    <th>持卡人名称</th>
    					    <th>操作</th>
    					    </tr>
    					     <tr v-for="l in banklist">
    					    <td>{{l.BANK}}</td>
    					    <td>{{l.CARDNUM}}</td>
    					    <td>{{l.NAME}}</td>
    					    <td>
    					    <a @click="ed(l.MEMBERACCOUNT_ID,l.BANK,l.CARDNUM,l.NAME)">修改</a>
    					    <a @click="del(l.MEMBERACCOUNT_ID)">删除</a>
                            </td>
    					    </tr>
                        </table>
    				</div>
    				<div class="mg_top40">
    					<a href="javascript:;" class="basic_a"  @click="sub"  style="padding: 5px 80px;margin-left: 150px;">保存</a>
    				</div>
    			</form>
    		</div>
    	</div>`
});
//会员中心
